droppable:stop

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

Синтаксис события

draggable.on('droppable:stop', function(event) {
  console.log(event);
});
  • draggable — экземпляр Draggable.
  • event — объект события, содержащий всю информацию о дроп-операции.

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

Объект события droppable:stop включает следующие ключевые свойства:

  • source — элемент, который был перетянут.
  • mirror — клон перетаскиваемого элемента, который создаётся для визуального перемещения.
  • sensorEvent — исходное событие мыши или сенсорного устройства.
  • over — дроп-зона, над которой находился элемент на момент отпускания, либо null, если элемент не был над дроп-зоной.
  • originalSource — исходный DOM-элемент, с которого началось перетаскивание.

Пример для логирования всех ключевых параметров:

draggable.on('droppable:stop', event => {
  console.log('Источник:', event.source);
  console.log('Клон элемента:', event.mirror);
  console.log('Дроп-зона:', event.over);
  console.log('Оригинальный элемент:', event.originalSource);
});

Отличие от других событий

Событие droppable:stop отличается от:

  • droppable:over — срабатывает при наведении на дроп-зону.
  • droppable:out — срабатывает при выходе элемента из дроп-зоны.
  • droppable:drop — срабатывает только если элемент был успешно отпущен над дроп-зоной.

droppable:stop всегда срабатывает, независимо от того, произошло ли успешное падение в дроп-зону, что делает его идеальным для финальных действий по очистке состояния.

Основные сценарии использования

  1. Сброс стилей дроп-зоны и элемента
draggable.on('droppable:stop', event => {
  if (event.over) {
    event.over.style.border = '';
  }
  event.source.style.opacity = '';
});
  1. Удаление временных классов для визуализации
draggable.on('droppable:stop', event => {
  event.source.classList.remove('dragging');
  if (event.mirror) {
    event.mirror.remove();
  }
});
  1. Логирование или аналитика
draggable.on('droppable:stop', event => {
  console.log(`Элемент ${event.source.id} был перемещен.`);
  if (event.over) {
    console.log(`Элемент оказался над дроп-зоной ${event.over.id}`);
  } else {
    console.log('Элемент не попал в дроп-зону');
  }
});

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

  • Использовать droppable:stop для действий, которые должны выполняться вне зависимости от успешного дропа.
  • Не изменять DOM сильно внутри этого события, если планируется одновременный запуск droppable:drop, чтобы не создавать конфликтов визуального состояния.
  • Совмещать с событиями droppable:over и droppable:out для построения комплексной логики подсветки и отката.

Взаимодействие с mirror элементом

mirror — это клон перетаскиваемого элемента, который отображается поверх страницы. В droppable:stop можно безопасно удалять или изменять его, так как операция перетаскивания завершается:

draggable.on('droppable:stop', event => {
  if (event.mirror) {
    event.mirror.parentNode.removeChild(event.mirror);
  }
});

Такой подход предотвращает появление “зависших” визуальных элементов после завершения перетаскивания.

Обработка ошибок и некорректных состояний

Иногда элемент может быть отпущен за пределами допустимых дроп-зон. В droppable:stop удобно обрабатывать такие случаи:

draggable.on('droppable:stop', event => {
  if (!event.over) {
    console.warn('Элемент отпущен вне дроп-зоны, возвращаем на место.');
    event.source.style.transform = 'translate(0, 0)';
  }
});

Это позволяет поддерживать консистентное состояние интерфейса и предотвращает “потерю” элементов.

Итоговые акценты

  • Срабатывает всегда при завершении перетаскивания.
  • Позволяет очистить состояния, вернуть стили и удалить вспомогательные элементы.
  • Работает вместе с droppable:drop, droppable:over и droppable:out, обеспечивая полное управление жизненным циклом драг-н-дроп операции.
  • Используется для логики, которая должна выполняться независимо от успеха дропа, включая анимации, возврат элемента и аналитические действия.
Оглавление