removeOnSpill - удаление при отмене

Dragula — это легковесная библиотека для организации перетаскивания элементов (drag-and-drop) на веб-страницах. Одной из ключевых особенностей является возможность гибкой настройки поведения при отмене перетаскивания. Параметр removeOnSpill отвечает за удаление элемента, если перетаскивание завершилось вне допустимой зоны.

Принцип работы removeOnSpill

removeOnSpill представляет собой логический флаг (true или false), передаваемый при инициализации Dragula. Его основная задача:

  • Если значение true и элемент отпущен вне целевой контейнерной области (spill), элемент автоматически удаляется из DOM.
  • Если значение false (по умолчанию), элемент возвращается на исходное место при отмене перетаскивания.

Пример базовой инициализации с removeOnSpill:

const drake = dragula({
    containers: [document.querySelector('#left'), document.querySelector('#right')],
    removeOnSpill: true
});

В данном случае, если пользователь перетащит элемент за пределы контейнеров #left и #right и отпустит его, элемент будет удалён из DOM.

Отличие removeOnSpill от других опций

Dragula предоставляет несколько опций для контроля поведения элементов:

  • copy — создаёт копию элемента при перетаскивании. removeOnSpill при этом применяется только к элементу-копии.
  • revertOnSpill — отменяет перетаскивание, возвращая элемент на исходное место. Совместное использование с removeOnSpill: true не имеет смысла, так как элемент будет удалён.

Ключевой момент: removeOnSpill срабатывает только при отпускании элемента вне контейнеров, а не при перемещении внутри них.

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

  1. Удаление элементов при «сбросе» вне контейнеров
dragula([document.querySelector('#list')], {
    removeOnSpill: true
});
  • Перетаскиваемый элемент, если отпущен за пределами #list, исчезает из DOM.
  • Удобно для интерфейсов, где «мусорное ведро» реализовано простым удалением элемента без отдельной зоны.
  1. Совмещение с копированием элементов
dragula([document.querySelector('#source'), document.querySelector('#target')], {
    copy: true,
    removeOnSpill: true
});
  • Исходный элемент остаётся на месте.
  • Копия удаляется, если отпущена вне контейнера #target.
  • Полезно для панелей инструментов или библиотек компонентов.

Взаимодействие с событиями Dragula

Dragula предоставляет события, которые позволяют управлять поведением при удалении элементов:

  • drag — срабатывает при начале перетаскивания.
  • drop — при отпускании элемента в контейнере.
  • cancel — при отмене перетаскивания. Если removeOnSpill: true, событие cancel может использоваться для выполнения дополнительных действий перед удалением.
  • remove — срабатывает, когда элемент удаляется с помощью removeOnSpill. Полезно для логирования или обновления состояния данных.

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

drake.on('remove', function (el, container, source) {
    console.log('Элемент удалён:', el);
});

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

  • Для интерфейсов с «мусорной корзиной» удобно сочетать removeOnSpill: true с отдельной зоной контейнера, чтобы элементы могли быть удалены только в определённой области.
  • Если элемент важен, но требуется контроль над удалением, лучше использовать revertOnSpill и обрабатывать удаление вручную через событие drop или remove.
  • При работе с копиями (copy: true) нужно учитывать, что исходный элемент не удаляется, а удаляется только временно созданная копия. Это предотвращает случайное исчезновение исходного контента.

Тонкости и подводные камни

  1. Удаление элементов вне контейнера Элемент полностью удаляется из DOM. Если он содержал обработчики событий или внутреннее состояние, оно также будет потеряно. Нужно убедиться, что это не вызовет непредвиденных ошибок.

  2. Совместимость с фреймворками В React, Vue или Angular прямое удаление элементов может нарушить реактивность. В таких случаях лучше использовать событие remove для синхронизации состояния.

  3. Стилизация контейнеров Dragula не создаёт визуальных подсказок «зоны удаления». Если требуется, чтобы пользователь видел, что элемент исчезнет при отпускании, необходимо добавить собственное CSS-оформление или индикатор.

removeOnSpill является мощным инструментом для управления поведением перетаскивания элементов в Dragula. Он позволяет реализовать удобное удаление элементов при отпускании за пределами контейнера, сохраняя при этом простоту и минимализм кода.

Оглавление