Параметры объекта события

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

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

Объект события содержит ключевые поля, которые повторяются в большинстве обработчиков:

  • item — DOM-элемент, который перемещается. Содержит прямую ссылку на HTML-элемент, что позволяет изменять его атрибуты или стили непосредственно в обработчике события.
  • from — контейнер, из которого был извлечен элемент. Представляет собой родительский элемент, что полезно при работе с несколькими списками.
  • to — контейнер, в который элемент был перемещён. Если работа ведется с одним списком, from и to совпадают, но при подключении group и drag-and-drop между списками они различаются.
  • oldIndex — исходный индекс элемента до перетаскивания. Позволяет отслеживать изменения порядка.
  • newIndex — новый индекс элемента после завершения перемещения. Используется для синхронизации данных, например, в массиве объектов, соответствующем DOM-структуре.
  • clone — клон элемента, создаваемый при использовании опции pull: 'clone' в группах. Используется для создания дубликатов элементов без удаления исходного.
  • pullMode — строка, показывающая режим, при котором элемент был извлечен: 'clone' или 'move'.

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

События и их параметры

1. onStart Срабатывает в момент начала перетаскивания. Параметры объекта события позволяют определить:

  • элемент, который начинает перемещение (item)
  • контейнер источника (from)
  • координаты курсора относительно элемента

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

new Sortable(list, {
  onStart: function(evt) {
    console.log('Начало перетаскивания:', evt.item);
    evt.item.style.opacity = '0.5';
  }
});

evt.item можно модифицировать сразу, изменяя визуальное отображение во время drag.

2. onEnd Срабатывает после завершения перемещения. Это ключевое событие для синхронизации данных. Основные свойства объекта:

  • oldIndex и newIndex для пересчета порядка элементов в массиве данных.
  • from и to для определения перемещения между списками.
  • item и clone для работы с оригиналом и клоном.

Пример пересчета массива после сортировки:

onEnd: function(evt) {
  const movedItem = dataArray.splice(evt.oldIndex, 1)[0];
  dataArray.splice(evt.newIndex, 0, movedItem);
  console.log('Обновленный порядок:', dataArray);
}

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

3. onAdd и onRemove Используются при перемещении элементов между списками. Параметры объекта события включают:

  • from — список источника
  • to — список назначения
  • item — перемещаемый элемент
  • oldIndex и newIndex — позиции в исходном и целевом списках
  • pullMode — режим извлечения элемента ('clone' или 'move')

Пример логирования добавленного элемента в другой список:

onAdd: function(evt) {
  console.log('Элемент добавлен в новый список:', evt.item);
  console.log('Из списка:', evt.from);
  console.log('На позицию:', evt.newIndex);
}

4. onUpdate Срабатывает при изменении порядка внутри одного контейнера. Параметры:

  • oldIndex и newIndex — ключевые свойства для перестановки элементов.
  • item — элемент, который переместился.

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

Дополнительные свойства и особенности

  • originalEvent — нативное событие мыши или сенсорного устройства, вызвавшее перетаскивание. Полезно для работы с координатами и модификаторами клавиш.
  • pullMode используется только в случае группы списков, особенно при режиме clone.
  • clone присутствует только если клон создается при drag-and-drop. В противном случае равен undefined.
  • to и from всегда доступны, даже если элемент остается в том же списке, что облегчает универсальную обработку событий.

Практические советы по работе с объектом события

  • Всегда использовать oldIndex и newIndex при изменении данных. Не опираться на DOM-индексы без проверки, так как они могут быть изменены CSS-свойствами.
  • Проверять evt.to !== evt.from при работе с группами, чтобы отличать перемещения внутри списка и между списками.
  • При использовании clone внимательно обрабатывать оригинал и клон, иначе можно случайно изменить не тот элемент.
  • originalEvent предоставляет полный контроль над поведением drag-and-drop, включая отмену события или модификацию курсора.

Этот набор свойств и событий формирует основу для любой сложной реализации Drag-and-Drop с SortableJS. Владение ими позволяет полностью контролировать процесс сортировки и интегрировать изменения с внутренней логикой приложения.

Оглавление