drag:stop и завершение

В библиотеке Shopify Draggable событие drag:stop является ключевым инструментом для отслеживания окончания процесса перетаскивания элементов. Оно срабатывает каждый раз, когда пользователь отпускает перетаскиваемый объект, завершив его перемещение. Это событие важно для корректной синхронизации состояния интерфейса и обновления данных после взаимодействия с элементами на странице.

Синтаксис и параметры события

Событие регистрируется через метод .on экземпляра Draggable:

const draggable = new Draggable(document.querySelectorAll('.draggable'), {
  draggable: '.item'
});

draggable.on('drag:stop', (event) => {
  console.log('Перетаскивание завершено');
  console.log('Элемент:', event.source);
  console.log('Контейнер:', event.container);
});

Основные параметры объекта события drag:stop:

  • event.source – перетаскиваемый элемент.
  • event.sensorEvent – оригинальное событие браузера (mousedown, touchstart, pointerdown).
  • event.container – контейнер, из которого был перетащен элемент.
  • event.draggable – экземпляр Draggable, с которым связано событие.
  • event.oldIndex и event.newIndex – индексы элемента до и после перетаскивания (актуально при использовании Sortable).

Отличие от drag:release

Событие drag:stop срабатывает после завершения всей анимации перетаскивания, включая плавное возвращение элементов в их новое положение. В отличие от drag:release, которое срабатывает в момент отпускания мыши или окончания касания, drag:stop гарантирует, что все визуальные эффекты завершены и интерфейс находится в окончательном состоянии. Это особенно важно при обновлении DOM или отправке данных на сервер после перемещения элементов.

Использование для синхронизации данных

После события drag:stop можно безопасно обновлять внутренние данные приложения:

draggable.on('drag:stop', (event) => {
  const itemId = event.source.dataset.id;
  const newIndex = event.newIndex;

  updateItemPosition(itemId, newIndex);
});

function updateItemPosition(id, index) {
  // Здесь может быть AJAX-запрос для обновления позиции на сервере
  console.log(`Элемент ${id} теперь на позиции ${index}`);
}

Это позволяет избежать несогласованности между визуальным порядком элементов и данными, хранящимися в базе или состоянии приложения.

Совместное использование с другими событиями Draggable

drag:stop часто комбинируется с событиями:

  • drag:start – для инициализации данных перед перемещением;
  • drag:move – для отслеживания текущей позиции элемента в процессе перетаскивания;
  • sortable:stop – при использовании Sortable для обновления индексов элементов после завершения сортировки.

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

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

draggable.on('drag:stop', (event) => {
  event.source.classList.remove('dragging');
  saveNewOrder();
});

В данном примере drag:stop обеспечивает удаление классов и вызов функции сохранения нового порядка после завершения анимации.

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

  • Использовать drag:stop для любых действий, связанных с окончательной обработкой позиции элемента.
  • Избегать выполнения тяжелых операций в drag:move, если их можно перенести в drag:stop, чтобы не ухудшать производительность.
  • Проверять наличие индексов oldIndex и newIndex при работе с сортируемыми контейнерами, чтобы корректно обновлять порядок элементов.
  • При необходимости интеграции с анимациями CSS убедиться, что событие drag:stop срабатывает после завершения всех визуальных эффектов.

Обработка нескольких контейнеров

Если используется несколько контейнеров, drag:stop предоставляет доступ к исходному и целевому контейнеру, что позволяет реализовать перенос элементов между различными секциями:

draggable.on('drag:stop', (event) => {
  if (event.container !== event.source.parentNode) {
    console.log('Элемент перемещен в другой контейнер');
  }
});

Это особенно полезно при организации сложных интерфейсов, где элементы могут быть распределены по разным спискам или панелям.

Взаимодействие с Sortable

В контексте Sortable событие drag:stop является завершающим этапом сортировки и часто используется для отправки окончательного порядка элементов на сервер. Оно срабатывает после того, как элементы плавно переместились на новые позиции и визуально интерфейс стабилизировался.

Хотите, я могу продолжить и сделать отдельный подробный пример с множественными контейнерами и drag:stop для динамической перестановки элементов с анимацией? Это поможет увидеть событие в реальном сложном сценарии.

Оглавление