Полный список событий

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

События перетаскивания

choose Происходит в момент выбора элемента для перетаскивания. Срабатывает перед любыми визуальными изменениями, позволяет определить, какой элемент станет активным. Объект события содержит:

  • evt.item — выбранный элемент.
  • evt.from — контейнер, из которого выбран элемент.

start Срабатывает сразу после начала перетаскивания. В этот момент элемент визуально перемещается вместе с курсором. Основные свойства:

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

move Происходит во время перемещения элемента по контейнеру. Возвращаемое значение события позволяет разрешить или запретить перемещение:

  • true — перемещение разрешено.
  • false — перемещение запрещено. Ключевые свойства:
  • evt.related — элемент, относительно которого происходит перемещение.
  • evt.willInsertAfter — логическое значение, указывающее, будет ли элемент вставлен после related.

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

  • evt.item — перемещённый элемент.
  • evt.from и evt.to — исходный и конечный контейнеры.
  • evt.oldIndex и evt.newIndex — исходный и новый индексы элемента.

События изменения порядка

update Происходит, если элемент был перемещён внутри контейнера и список изменил порядок элементов. Позволяет синхронизировать данные с новым порядком DOM. Основные свойства:

  • evt.item — перемещённый элемент.
  • evt.from — контейнер до изменения.
  • evt.oldIndex — индекс до изменения.
  • evt.newIndex — индекс после перемещения.

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

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

  • evt.item — перемещаемый элемент.
  • evt.from — исходный контейнер.
  • evt.oldIndex — индекс элемента до удаления.

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

  • evt.item — добавленный элемент.
  • evt.to — контейнер, куда вставлен элемент.
  • evt.newIndex — индекс элемента после вставки.

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

Вспомогательные события

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

unchoose Происходит, когда элемент был снят с выбора, но перетаскивание не началось.

change Обновляется при любом изменении состояния сортировки, в том числе при перетаскивании, добавлении или удалении элемента. Используется для синхронизации внешних данных с текущим состоянием списка.

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

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

cancel Срабатывает, если перетаскивание было отменено пользователем или программно через метод sortable.cancel().

Особенности работы событий

  • Все события передают объект evt, содержащий ссылки на элементы и контейнеры, а также информацию о позициях.
  • События можно комбинировать: например, одновременно использовать move для контроля над перемещением и update для синхронизации данных.
  • События делятся на те, которые изменяют порядок (update, sort, add, remove), и вспомогательные (choose, start, end, move, clone, filter).

Использование полного набора событий SortableJS позволяет создавать сложные интерфейсы с множеством взаимодействующих списков, гибко управлять элементами и поддерживать актуальное состояние данных без конфликтов и ошибок при перетаскивании.

Оглавление