swappable:start и swappable:swap

Событие swappable:start возникает в момент начала перетаскивания элемента, который настроен для взаимодействия с функционалом Swappable библиотеки Shopify Draggable. Оно является ключевым для отслеживания момента, когда элемент начинает менять своё положение в пределах контейнера или между контейнерами.

Аргументы события

Объект события содержит несколько важных свойств:

  • source — DOM-элемент, который был выбран для перетаскивания.
  • sensorEvent — оригинальное событие мыши или сенсора (например, mousedown, touchstart).
  • dragEvent — объект Draggable, представляющий текущее перетаскивание.

Использование

import { Swappable } from '@shopify/draggable';

const swappable = new Swappable(document.querySelectorAll('.swappable-container'), {
  draggable: '.swappable-item',
});

swappable.on('swappable:start', (event) => {
  console.log('Начало перетаскивания:', event.source);
  event.source.style.opacity = 0.5; // визуальный эффект начала перетаскивания
});

В этом примере при старте перетаскивания элемент становится полупрозрачным, что сигнализирует о его текущем состоянии. Событие swappable:start удобно использовать для:

  • Применения визуальных эффектов к элементу при начале перетаскивания.
  • Логирования действий пользователя для аналитики.
  • Инициализации дополнительной логики перед обменом элементов (например, блокировка других интерактивных действий).

Событие swappable:swap

Событие swappable:swap срабатывает в момент, когда два элементов обмениваются позициями в контейнере. Это основное событие для отслеживания фактической перестановки элементов.

Аргументы события

Объект события содержит:

  • source — элемент, который был перетаскиваемым.
  • over — элемент, с которым произошёл обмен.
  • sensorEvent — исходное событие мыши или касания.
  • swapEvent — объект, содержащий подробности перестановки.

Использование

swappable.on('swappable:swap', (event) => {
  console.log('Элементы поменялись местами:', event.source, '↔', event.over);

  // пример: изменение стилей
  event.source.classList.add('swapped');
  event.over.classList.add('swapped');

  // можно выполнить сохранение нового порядка на сервер
  saveNewOrder();
});

Применение в проектах

  1. Обновление данных на сервере После события swappable:swap можно отправлять AJAX-запрос с новым порядком элементов для сохранения состояния интерфейса.

  2. Визуальные эффекты Лёгкое изменение цвета или добавление анимации при swap делает интерфейс более отзывчивым.

  3. Валидация изменений Можно проверять допустимость обмена перед его завершением, например, блокировать swap определённых элементов:

swappable.on('swappable:swap', (event) => {
  if (event.source.dataset.type === 'locked' || event.over.dataset.type === 'locked') {
    event.cancel(); // отменяет обмен
  }
});

Взаимодействие swappable:start и swappable:swap

События тесно связаны: swappable:start инициирует процесс, а swappable:swap фиксирует результат. Правильная организация логики позволяет:

  • Создавать цепочки событий, где старт перетаскивания активирует анимацию или логику подготовки, а swap фиксирует результат и сохраняет данные.
  • Обрабатывать несколько контейнеров: один и тот же swappable:start может работать для всех элементов, а swappable:swap применяется только при обмене между ними.
  • Реализовать интерактивные интерфейсы, где элементы динамически перемещаются и сохраняют состояние в реальном времени.

Пример комплексной реализации:

swappable.on('swappable:start', (event) => {
  event.source.classList.add('dragging');
});

swappable.on('swappable:swap', (event) => {
  event.source.classList.remove('dragging');
  event.over.classList.remove('dragging');
  updateDatabaseOrder(event.source, event.over);
});

Здесь swappable:start отмечает элемент как активный для перетаскивания, а swappable:swap завершает процесс, убирая визуальный индикатор и синхронизируя порядок элементов с сервером.

Полезные советы

  • Для комплексных интерфейсов лучше комбинировать оба события: одно для подготовки, другое — для финальной логики.
  • Использование event.cancel() в swappable:swap позволяет полностью контролировать допустимые перемещения.
  • sensorEvent даёт доступ к исходным координатам мыши или касания, что важно для кастомной анимации или точного позиционирования элементов.
  • Поддержка нескольких контейнеров требует внимательного управления over элементами, чтобы избежать конфликтов при swap.

Эти события образуют основу работы с функционалом Swappable в Shopify Draggable и позволяют создавать гибкие и динамичные интерфейсы с полной контролируемостью процесса перетаскивания и обмена элементов.

Оглавление