Анонсы действий

Библиотека Shopify Draggable предоставляет мощный API для работы с перетаскиванием элементов на странице. Одним из ключевых компонентов является система событий, которая позволяет отслеживать и управлять жизненным циклом драггинга. События делятся на несколько категорий: drag, drop, mirror, sortable, каждая из которых отражает конкретный этап взаимодействия с элементами.

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

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

draggable.on('drag:start', (event) => {
  console.log('Начало перетаскивания', event);
});

Drag-события

drag:start – вызывается при начале перетаскивания. Дает доступ к объекту события, содержащему:

  • source – исходный DOM-элемент, который был захвачен.
  • sensorEvent – оригинальное событие мыши или сенсора.
  • dragEvent – внутренние данные Draggable, включая позиции и индексы.

drag:move – происходит при перемещении элемента. Используется для динамических эффектов или проверки позиции элемента.

drag:stop – вызывается после окончания перетаскивания, даже если элемент не был успешно сброшен. Отличается от drop:stop, который фиксирует фактическое завершение с переносом.

Drop-события

drop:over – срабатывает, когда перетаскиваемый элемент входит в область другой колонки или контейнера.

drop:out – событие выхода элемента из контейнера.

drop:activate и drop:deactivate – управляют состоянием контейнера во время перетаскивания.

drop:stop – фиксирует успешное завершение перемещения элемента в новую позицию.

Пример использования drop-событий:

draggable.on('drop:over', (event) => {
  event.over.style.background = '#f0f0f0';
});

draggable.on('drop:stop', (event) => {
  event.source.style.transform = '';
});

Mirror-события

Mirror-система Draggable создает визуальный клон перетаскиваемого элемента. Она управляет отображением движения без изменения исходного DOM до момента завершения операции.

Основные события:

  • mirror:create – создание клона.
  • mirror:move – движение клона.
  • mirror:destroy – удаление клона после завершения операции.
draggable.on('mirror:create', (event) => {
  event.mirror.style.opacity = '0.7';
});

Sortable-события

Для упорядочивания элементов внутри одного контейнера используются sortable-события:

  • sortable:sorted – вызывается при изменении порядка элементов.
  • sortable:start и sortable:stop – отслеживают начало и окончание сортировки.
draggable.on('sortable:sorted', (event) => {
  console.log('Новый порядок:', event.newIndex, event.oldIndex);
});

Анонсы действий через события

Draggable позволяет анонсировать предстоящие действия, прежде чем они фактически произойдут, что важно для сложных интерфейсов с визуальными эффектами или асинхронными проверками. Основные подходы:

  1. Предварительная проверка контейнера
draggable.on('drag:move', (event) => {
  const target = document.elementFromPoint(event.source.clientX, event.source.clientY);
  if (target && target.classList.contains('no-drop')) {
    event.cancel(); // отменяет перемещение на запрещенную область
  }
});
  1. Динамическое изменение позиции зеркала

Используя события mirror:move, можно менять положение клона без изменения исходного элемента.

draggable.on('mirror:move', (event) => {
  event.mirror.style.transform = `translate(${event.clientX}px, ${event.clientY}px)`;
});
  1. Анонс сортировки до её завершения

События sortable:sort и sortable:sorted позволяют визуально оповещать о будущем изменении порядка элементов.

draggable.on('sortable:sort', (event) => {
  event.cancel(); // можно временно заблокировать перестановку
});

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

  • Использовать drag:move для подсветки потенциальных зон сброса.
  • События mirror: подходят для кастомизации внешнего вида перетаскиваемого объекта.
  • Всегда проверять наличие event.cancelable перед вызовом event.cancel() для предотвращения ошибок.
  • Для сложных интерфейсов комбинировать sortable- и drop-события, чтобы синхронизировать порядок элементов и визуальные эффекты.

Подытоживание анонсов

  • Предварительная проверка – позволяет блокировать нежелательные действия.
  • Визуальный клон (mirror) – отображает перемещение до фактического изменения DOM.
  • Sortable-анонс – уведомляет о будущем изменении порядка элементов.
  • Drop-анонс – сообщает контейнерам о возможном попадании элемента внутрь или выхода из них.

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

Оглавление