droppable:dropped и droppable:returned

Библиотека Shopify Draggable предоставляет мощный инструмент для реализации drag-and-drop интерфейсов в веб-приложениях. Одним из ключевых аспектов является работа с drop-зонами, которые обрабатывают события успешной или отменённой передачи элемента. Два основных события, управляющих этим процессом — droppable:dropped и droppable:returned.

droppable:dropped

Событие droppable:dropped возникает в момент, когда перетаскиваемый элемент успешно опущен в drop-зону, которая соответствует заданным условиям. Оно позволяет получить информацию о том, какой элемент был перенесён и куда именно он попал.

Свойства события:

  • dragEvent.source — элемент, с которого был начат перетаскиваемый объект.
  • dragEvent.sensorEvent — объект сенсорного события, который вызвал перетаскивание (MouseEvent или TouchEvent).
  • dragEvent.over — элемент drop-зоны, в которую был помещён объект.
  • dragEvent.originalSource — исходный элемент до любых клонирований или изменений.

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

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

const droppable = new Droppable(document.querySelectorAll('.drop-zone'), {
  draggable: '.draggable-item'
});

droppable.on('droppable:dropped', (event) => {
  console.log('Элемент был успешно помещён в drop-зону.');
  console.log('Перетаскиваемый элемент:', event.dragEvent.source);
  console.log('Drop-зона:', event.dragEvent.over);
});

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

  • Событие вызывается только при успешной проверке на допустимость drop-зоны, согласно настройкам Droppable.

  • Позволяет выполнять действия после перемещения, например:

    • обновление данных модели,
    • изменение DOM,
    • запуск анимаций.

droppable:returned

Событие droppable:returned срабатывает, когда элемент не был успешно перемещён в drop-зону и возвращается на исходное место. Это критично для интерфейсов, где важно различать успешное и неуспешное перетаскивание.

Свойства события:

  • dragEvent.source — перетаскиваемый элемент.
  • dragEvent.sensorEvent — объект сенсорного события.
  • dragEvent.over — null, так как элемент не попал в drop-зону.
  • dragEvent.originalSource — исходный элемент.

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

droppable.on('droppable:returned', (event) => {
  console.log('Элемент вернулся на исходное место.');
  console.log('Возврат элемента:', event.dragEvent.source);
});

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

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

Взаимодействие droppable:dropped и droppable:returned

  • Эти события взаимоисключающие: при успешной передаче срабатывает только droppable:dropped, а при неудачной — droppable:returned.
  • Логика обработки часто строится вокруг единого обработчика dragEvent, который анализирует исходный элемент и состояние drop-зоны.

Пример комплексной обработки:

droppable.on('droppable:dropped', handleDrop)
         .on('droppable:returned', handleReturn);

function handleDrop(event) {
  event.dragEvent.source.classList.add('dropped');
  event.dragEvent.over.classList.add('has-item');
}

function handleReturn(event) {
  event.dragEvent.source.classList.add('returned');
  console.warn('Перемещение отменено, элемент вернулся на исходное место.');
}

Ключевые моменты для реализации интерфейсов:

  • droppable:dropped — для подтверждённых действий.
  • droppable:returned — для откатов и контроля ошибок.
  • Использование этих событий совместно позволяет создавать интерактивные и отзывчивые drag-and-drop интерфейсы, минимизируя неожиданные поведения элементов.

Настройки Droppable, влияющие на события

Некоторые параметры Droppable напрямую определяют, когда срабатывают события:

  • accept — CSS-селектор, который определяет, какие элементы можно помещать в drop-зону. Элементы, не соответствующие селектору, вызывают droppable:returned.
  • hoverClass — CSS-класс для drop-зоны при наведении элемента.
  • activeClass — класс, активируемый на drop-зоне во время перетаскивания.

Пример с фильтром:

const droppable = new Droppable(document.querySelectorAll('.drop-zone'), {
  draggable: '.draggable-item',
  accept: '.allowed-item'
});

В этом случае неразрешённые элементы автоматически возвращаются, срабатывает событие droppable:returned.

Практическое использование в интерфейсах

  1. Списки задач (Kanban) — успешный drop перемещает карточку в новую колонку (droppable:dropped), а запрещённые перемещения возвращают карточку (droppable:returned).
  2. Корзины товаров — перемещение товара в корзину вызывает droppable:dropped для обновления состояния, а попытка положить несуществующий элемент обратно — droppable:returned.
  3. Настраиваемые панели — элементы интерфейса, которые нельзя перемещать в определённые секции, используют droppable:returned для отката позиции и анимации.

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

Оглавление