swappable:swapped и swappable:stop

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

swappable:swapped

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

Структура события:

{
  oldIndex: number,       // исходный индекс элемента
  newIndex: number,       // новый индекс элемента после перестановки
  dragEvent: DragEvent,   // объект исходного события drag
  dragEventData: Object,  // дополнительные данные Draggable
  dragged: HTMLElement,   // элемент, который был перетащен
  over: HTMLElement,      // элемент, над которым произошло перемещение
  container: HTMLElement  // контейнер, содержащий элементы
}

Пример использования:

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

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

container.addEventListener('swappable:swapped', (event) => {
  const { oldIndex, newIndex, dragged, over } = event.detail;

  console.log(`Элемент ${dragged.textContent} перемещён с позиции ${oldIndex} на ${newIndex}`);
  console.log(`Элемент над которым перемещали: ${over.textContent}`);
});

Особенности:

  • Событие срабатывает только после успешного обмена элементами.
  • Доступны индексы и сами DOM-элементы, что позволяет синхронизировать порядок с внешними источниками данных.
  • Можно использовать для отправки AJAX-запросов, обновления состояния Vue/React или сохранения в localStorage.

swappable:stop

Описание: Событие swappable:stop вызывается в конце процесса перетаскивания, вне зависимости от того, было ли фактическое изменение позиции элемента или нет. Оно аналогично drag:stop в стандартном Draggable, но применимо к Swappable.

Структура события:

{
  dragEvent: DragEvent,   // объект исходного события drag
  dragged: HTMLElement,   // элемент, который перетаскивали
  over: HTMLElement,      // элемент, над которым был drag
  container: HTMLElement  // контейнер, содержащий элементы
}

Пример использования:

container.addEventListener('swappable:stop', (event) => {
  const { dragged, over } = event.detail;

  if (over) {
    console.log(`Элемент ${dragged.textContent} отпущен над ${over.textContent}`);
  } else {
    console.log(`Элемент ${dragged.textContent} отпущен вне зоны контейнера`);
  }
});

Особенности:

  • Срабатывает всегда при завершении drag, даже если элемент вернулся на своё место.
  • Позволяет выполнять действия после окончания взаимодействия, например: убрать временные классы, завершить анимации, восстановить состояние контейнера.
  • Используется для отладки и контроля поведения интерфейса после завершения перетаскивания.

Отличия и сценарии применения

Событие Когда срабатывает Полезно для
swappable:swapped После успешного обмена элементов Обновление порядка данных, уведомления, аналитика
swappable:stop После завершения drag в любом случае Очистка состояния, анимации, восстановление классов

Пример совместного использования:

container.addEventListener('swappable:swapped', (event) => {
  console.log('Элементы поменялись местами:', event.detail);
});

container.addEventListener('swappable:stop', (event) => {
  console.log('Завершено перетаскивание элемента:', event.detail.dragged.textContent);
});

В этом примере swappable:swapped фиксирует фактические изменения порядка, а swappable:stop позволяет выполнять действия в любом случае, например, для визуальной очистки или сохранения состояния интерфейса.

Практические рекомендации

  • Для отслеживания изменений порядка элементов предпочтительнее использовать swappable:swapped.
  • Для очистки временных стилей или завершения анимаций — swappable:stop.
  • Оба события можно комбинировать, чтобы добиться точного контроля над поведением интерфейса.
  • В React/Vue полезно использовать события для синхронизации состояния компонентов с реальным DOM.
  • При большом количестве элементов стоит минимизировать обработку в swappable:stop, чтобы не вызывать лишних перерендеров.

Эти события образуют ядро управления поведением Swappable, обеспечивая гибкий контроль над процессом перетаскивания и перестановки элементов. Правильное использование swappable:swapped и swappable:stop позволяет создавать плавные, отзывчивые интерфейсы с точной синхронизацией данных и визуальных эффектов.

Оглавление