События жизненного цикла

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

Основные события

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

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

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

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

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

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

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

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

Используется для управления множественными списками и поддержания согласованности данных.

update Срабатывает при изменении порядка элементов в пределах одного контейнера. В объекте события:

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

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

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

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

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

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

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

Настройка событий

Для регистрации событий используется объект опций при инициализации Sortable:

const sortable = new Sortable(list, {
  animation: 150,
  onStart: function (event) {
    console.log('Начало перетаскивания:', event.item);
  },
  onEnd: function (event) {
    console.log('Элемент перемещен из', event.oldIndex, 'в', event.newIndex);
  },
  onAdd: function (event) {
    console.log('Элемент добавлен в контейнер', event.to);
  },
  onUpdate: function (event) {
    console.log('Элемент обновлён:', event.item);
  }
});

Также события могут быть привязаны через метод Sortable.utils.on или стандартные слушатели DOM, но использование встроенных опций является наиболее прозрачным и безопасным способом.

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

  1. Асинхронное изменение DOM Любые действия с DOM внутри обработчиков могут влиять на корректность индексов oldIndex и newIndex. Рекомендуется выполнять обновления после завершения события end.

  2. Взаимодействие с несколькими списками При работе с группами контейнеров важно различать события add, remove и update. Например, добавление элемента из другого списка одновременно вызывает remove в исходном контейнере и add в целевом.

  3. Опция draggable События срабатывают только для элементов, соответствующих селектору draggable. Элементы, исключённые через filter или не соответствующие draggable, игнорируются.

  4. Анимации и визуальная обратная связь Использование опции animation не влияет на события, но может создавать визуальное ощущение задержки. Для точного получения позиций элементов рекомендуется работать с onEnd.

  5. Вложенные списки Для контейнеров с вложенными sortable-списками важно корректно определять from и to, так как событие может всплывать через несколько уровней DOM.

Примеры типичных сценариев

  • Синхронизация с сервером: после события end отправляется новый порядок элементов на сервер для постоянного хранения.
  • Подсветка перетаскиваемого элемента: при start добавляется CSS-класс, при end класс удаляется.
  • Ограничение перемещения: через событие filter блокируются определённые элементы от перетаскивания.
  • Множественные списки: обработка add и remove для корректного переноса элементов между списками и обновления локального состояния данных.

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

Оглавление