droppable:start и droppable:over

Библиотека Shopify Draggable предоставляет мощный инструмент для реализации перетаскивания элементов на веб-странице. Среди множества событий, которые можно использовать для управления drag-and-drop интерфейсами, особое значение имеют droppable:start и droppable:over. Эти события тесно связаны с зонами, куда элемент может быть перемещен (droppables), и позволяют динамически реагировать на процесс перетаскивания.

droppable:start

Описание: Событие droppable:start срабатывает в момент, когда draggable элемент начинает взаимодействовать с зоной droppable. Это не просто начало drag-операции, а точка, где определённый droppable становится “активным” для перетаскиваемого объекта.

Параметры события: Объект события передает следующие ключевые свойства:

  • source — элемент, который инициировал перетаскивание (draggable).
  • sensorEvent — исходное событие мыши или касания.
  • dragEvent — объект drag-операции, включающий текущее состояние перетаскивания.
  • droppable — элемент, который распознан как droppable для текущего drag.

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

const droppables = new Draggable.Droppable(document.querySelectorAll('.droppable-container'), {
  draggable: '.draggable-item'
});

droppables.on('droppable:start', (event) => {
  event.droppable.classList.add('highlight');
  console.log('Элемент вошел в область droppable', event.droppable);
});

Практическое применение:

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

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

  • Событие срабатывает один раз при входе draggable в droppable зону, а не на каждом перемещении внутри неё.
  • Можно использовать для проверки условий, разрешающих или запрещающих drop.

droppable:over

Описание: Событие droppable:over срабатывает каждый раз, когда перетаскиваемый элемент находится над droppable зоной. В отличие от droppable:start, оно повторяется многократно при движении элемента внутри droppable области, что позволяет реализовать динамическое реагирование на положение drag.

Параметры события: Аналогичны droppable:start, с тем отличием, что можно отслеживать координаты и смещения:

  • source — draggable элемент.
  • over — текущий droppable элемент.
  • sensorEvent — исходное событие мыши или touch.
  • dragEvent — объект текущей drag-операции, включая позицию и смещение.

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

droppables.on('droppable:over', (event) => {
  const { source, over } = event;
  over.style.backgroundColor = 'rgba(0, 150, 0, 0.2)';
  console.log(`Элемент ${source.textContent} находится над ${over.id}`);
});

Практическое применение:

  • Подсветка точного положения, где будет вставлен элемент.
  • Реализация динамического изменения размеров или анимации контейнера при наведении.
  • Отслеживание позиции элемента для сложных drag-and-drop схем, например, перестановки списка.

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

  • Срабатывает каждый раз, когда draggable элемент движется над droppable.
  • Может быть использовано вместе с droppable:start и droppable:out для полного контроля поведения зон.
  • Важно оптимизировать обработчик, чтобы избежать просадки производительности при частом срабатывании.

Взаимодействие droppable:start и droppable:over

Эти два события часто используются совместно для создания богатого UX:

  1. droppable:start — инициализация визуальной подсветки или логики зоны при входе.
  2. droppable:over — динамическая реакция на перемещение draggable внутри droppable, например, плавное смещение соседних элементов.
  3. droppable:out — удаление эффектов при выходе из зоны (дополняет цепочку событий).

Пример комплексной схемы:

droppables.on('droppable:start', (event) => {
  event.droppable.classList.add('active-dropzone');
});

droppables.on('droppable:over', (event) => {
  const position = event.dragEvent.sensorEvent.clientX;
  event.droppable.style.transform = `translateX(${position / 10}px)`;
});

droppables.on('droppable:out', (event) => {
  event.droppable.classList.remove('active-dropzone');
  event.droppable.style.transform = '';
});

Такой подход позволяет создавать интуитивные и отзывчивые интерфейсы перетаскивания, где пользователи видят визуальную обратную связь в реальном времени.

Рекомендации по оптимизации

  • Минимизировать DOM-операции в обработчиках droppable:over, так как они могут вызываться десятки раз в секунду.
  • Использовать CSS-классы вместо inline-стилей для частых изменений визуальных эффектов.
  • Объединять события с логикой throttle/debounce, если нужно снизить нагрузку при быстром перемещении.
  • Комбинировать с mirror объектами, чтобы показывать копию draggable при перетаскивании и не влиять на исходный элемент до drop.

Эти события являются фундаментальными для реализации любых сложных drag-and-drop интерфейсов в Shopify Draggable, обеспечивая точный контроль над поведением элементов и визуальной обратной связью.

Оглавление