OnSpill

onSpill — это один из событийных колбэков библиотеки SortableJS, предназначенный для управления поведением элементов при попытке перетаскивания за пределы контейнера. Его основная задача — отслеживать случаи, когда элемент был «выпущен» вне разрешённой области сортировки.

Назначение события

Событие onSpill срабатывает только тогда, когда элемент был перемещён и отпущен вне любого контейнера Sortable, к которому он привязан. В стандартном поведении SortableJS, если элемент перетащить за пределы контейнера и отпустить, он возвращается на своё исходное место. onSpill предоставляет возможность изменить это поведение: например, удалить элемент, отправить его в другой список или выполнить произвольное действие.

Ключевые моменты:

  • Срабатывает после завершения перетаскивания, когда элемент не попал ни в один контейнер.
  • Позволяет реализовать кастомное поведение при «выбросе» элемента.
  • Может быть использовано для реализации функционала типа «удалить элемент, если отпустить за пределами списка».

Сигнатура функции

onSpill: function (evt) {
    // evt — объект события
}

Объект события evt содержит следующие важные свойства:

  • evt.item — DOM-элемент, который был перетащен.
  • evt.from — исходный контейнер, из которого элемент был взят.
  • evt.clone — клон элемента, если используется опция pull: 'clone'.
  • evt.oldIndex — индекс элемента в исходном контейнере до перемещения.

Использование onSpill

Простейший пример обработки события onSpill:

const sortable = new Sortable(document.getElementById('list'), {
    onSpill: function (evt) {
        // Удаление элемента при выпадении за пределы контейнера
        evt.item.parentNode.removeChild(evt.item);
    }
});

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

Сценарии применения

  1. Удаление элементов В интерфейсах, где пользователь может удалять задачи или карточки, onSpill позволяет реализовать механизм «перетащи и выбрось».

  2. Перенос элементов в другие области Если интерфейс имеет несколько контейнеров, а пользователь отпустил элемент в пустом месте, событие onSpill может использоваться для переноса элемента в «резервный» контейнер.

  3. Анимации и визуальные эффекты Можно запускать анимации или подсказки при неправильном размещении элемента, делая интерфейс более наглядным и отзывчивым.

Взаимодействие с другими событиями

onSpill тесно связан с событиями:

  • onEnd — срабатывает всегда после завершения перетаскивания. Если элемент был выброшен за пределы, onSpill срабатывает перед onEnd.
  • onRemove — срабатывает, когда элемент перемещён в другой контейнер. Если элемент не попал в контейнер, onRemove не срабатывает.
  • onMove — срабатывает при движении элемента. Можно использовать вместе с onSpill для контроля допустимых зон перемещения.

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

  • Использовать onSpill только в сценариях, когда необходимо кастомное поведение для «неправильного» перемещения.
  • Для отмены стандартного возврата элемента на место можно применить удаление или клонирование элемента внутри onSpill.
  • При работе с множественными контейнерами важно проверять evt.from, чтобы понимать, из какого списка был взят элемент.
  • Если используется опция pull: 'clone', evt.clone содержит копию элемента, и её можно обработать отдельно.

Пример с перемещением в резервный контейнер

const mainList = document.getElementById('main');
const backupList = document.getElementById('backup');

new Sortable(mainList, {
    onSpill: function (evt) {
        // Перемещение элемента в резервный контейнер
        backupList.appendChild(evt.item);
    }
});

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

Настройка поведения возврата

По умолчанию, SortableJS возвращает элемент на исходную позицию. Чтобы изменить это:

new Sortable(mainList, {
    revertOnSpill: true // элемент вернется на исходное место
});

Если revertOnSpill установлен в false, необходимо самостоятельно обрабатывать элемент в onSpill, иначе он останется в DOM в последнем положении.

onSpill — мощный инструмент для тонкой настройки UX при перетаскивании элементов, особенно когда требуется управление элементами, оказавшимися вне ожидаемой области контейнера.

Оглавление