События обмена

SortableJS предоставляет широкий набор событий, которые позволяют отслеживать и управлять процессом перетаскивания элементов. События делятся на несколько категорий: жизненный цикл перетаскивания, манипуляции с элементами и завершение операций. Они обеспечивают гибкий контроль над сортировкой и взаимодействием между списками.

Основные события жизненного цикла

start Срабатывает в момент начала перетаскивания элемента. Объект события содержит следующие свойства:

item — перетаскиваемый DOM-элемент.
from — родительский контейнер, из которого началось перетаскивание.
oldIndex — исходный индекс элемента в списке.

Применение: можно использовать для визуальной индикации начала перетаскивания или блокировки некоторых действий на время сортировки.

end Вызывается при завершении перетаскивания, вне зависимости от того, был элемент перемещен или нет. Свойства:

item — перетаскиваемый элемент.
to — контейнер, в который был помещен элемент.
from — исходный контейнер.
oldIndex — индекс элемента до перемещения.
newIndex — индекс после перемещения.

end позволяет синхронизировать данные с сервером, обновлять локальное состояние или отменять изменения при необходимости.

События, связанные с перемещением

add Срабатывает, когда элемент добавляется в новый список. Используется при переносе элементов между несколькими списками. Свойства события:

item — добавляемый элемент.
to — контейнер, в который был добавлен элемент.
from — контейнер, из которого элемент был перемещен.
oldIndex — индекс элемента в исходном списке.
newIndex — индекс элемента в новом списке.

remove Происходит, когда элемент удаляется из исходного списка при переносе в другой. Свойства аналогичны add, но фокус смещен на контейнер-источник.

update Срабатывает, если элемент был перемещен внутри одного списка, что изменяет порядок элементов. Свойства:

item — перемещаемый элемент.
from — контейнер, в котором произошло изменение.
oldIndex — индекс до перемещения.
newIndex — индекс после перемещения.

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

Поддержка drag и clone

clone Возникает при клонировании элемента в процессе перетаскивания. Свойства:

clone — клонированный DOM-элемент.
original — исходный элемент.

Используется при настройке опции pull: 'clone' в multi-list сортировке, когда нужно сохранить исходный элемент в родительском списке.

События сортировки и визуальные индикаторы

choose Срабатывает в момент выбора элемента перед его перетаскиванием. Позволяет добавлять классы или стили для визуального выделения выбранного объекта.

unchoose Вызывается при отмене выбора элемента, если перетаскивание не началось. Используется для удаления визуальных эффектов, установленных на choose.

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

filter Срабатывает при попытке перетаскивания элемента, который подпадает под правило фильтрации. Позволяет предотвращать перемещение элементов с заданенными классами или атрибутами.

Свойства объектов события

Все события предоставляют объект с набором ключевых свойств:

Свойство	Описание
`item`	Перетаскиваемый элемент
`clone`	Клон элемента (если есть)
`from`	Исходный контейнер
`to`	Контейнер назначения
`oldIndex`	Исходный индекс
`newIndex`	Новый индекс
`pullMode`	Режим копирования для multi-list сортировки

Использование этих свойств позволяет полностью контролировать изменения в DOM и синхронизировать их с логикой приложения.

Взаимодействие нескольких списков

При работе с несколькими списками одновременно важно понимать разницу между событиями:

add и remove — для межсписочной логики.
update — для локальной перестановки внутри одного списка.
sort — для глобального отслеживания всех изменений порядка.

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