sortable:start и sortable:sort

Библиотека Shopify Draggable предоставляет удобный и гибкий инструмент для реализации перетаскивания элементов на веб-странице. Среди множества событий, которые она поддерживает, особое внимание заслуживают sortable:start и sortable:sort. Эти события позволяют точно управлять процессом сортировки элементов и интегрировать кастомное поведение в момент начала или во время сортировки.

sortable:start

Событие sortable:start срабатывает одновременно с началом перетаскивания элемента в контейнере Sortable. Это критический момент для инициализации любых действий, связанных с перетаскиванием: визуальных эффектов, изменения стилей, логирования действий пользователя или подготовки данных.

Свойства события:

  • event.source — DOM-элемент, который был захвачен пользователем.
  • event.oldIndex — исходный индекс элемента в контейнере до начала перетаскивания.
  • event.container — контейнер Sortable, в котором произошло событие.
  • event.dragEvent — исходный нативный MouseEvent или TouchEvent.

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

const sortable = new Draggable.Sortable(document.querySelectorAll('.list'), {
  draggable: '.item'
});

sortable.on('sortable:start', (event) => {
  console.log('Начато перетаскивание элемента:', event.source);
  event.source.style.opacity = '0.5';
});

В этом примере при начале перетаскивания элемент становится полупрозрачным. Использование sortable:start идеально подходит для:

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

sortable:sort

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

Свойства события:

  • event.source — элемент, который перемещается.
  • event.oldIndex — индекс элемента до начала перетаскивания.
  • event.newIndex — текущий индекс элемента в контейнере во время сортировки.
  • event.over — элемент, над которым находится перетаскиваемый объект (может быть null).
  • event.overContainer — контейнер, над которым находится элемент.
  • event.originalEvent — нативный MouseEvent или TouchEvent.

Пример динамического обновления индексов:

sortable.on('sortable:sort', (event) => {
  console.log(`Элемент ${event.source.textContent} перемещён с позиции ${event.oldIndex} на ${event.newIndex}`);
});

В отличие от sortable:start, событие sortable:sort срабатывает многократно во время движения элемента, что делает его полезным для:

  • динамического изменения классов CSS для визуализации текущего положения элемента,
  • реализации drag-and-drop между несколькими списками,
  • обновления состояния интерфейса или сохранения позиции элементов на сервере в реальном времени.

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

  1. Оптимизация производительности: Поскольку sortable:sort срабатывает очень часто, любые операции внутри обработчика должны быть минимальными. Использование requestAnimationFrame или debounce позволит избежать лагов при перетаскивании.

  2. Использование кастомных данных: Можно хранить данные на элементах через dataset и получать их в событиях. Например, уникальный ID товара или позиции в списке.

sortable.on('sortable:start', (event) => {
  const itemId = event.source.dataset.id;
  console.log('Перетаскивается элемент с ID:', itemId);
});

  1. Комбинирование событий: Чаще всего sortable:start и sortable:sort применяются вместе. sortable:start запускает подготовительные действия, а sortable:sort — динамическое обновление состояния.

  2. Обработка межконтейнерных перемещений: При работе с несколькими списками (containers), свойства event.overContainer и event.over позволяют точно определить, куда перетащен элемент, и корректно обновлять данные.

sortable.on('sortable:sort', (event) => {
  if (event.overContainer !== event.container) {
    console.log('Элемент перемещён в другой контейнер');
  }
});

Итоговая структура применения

Правильная работа с sortable:start и sortable:sort строится по следующему принципу:

  1. sortable:start — подготовка перетаскивания:

    • визуальные эффекты,
    • логирование,
    • блокировка других элементов.

  2. sortable:sort — динамическая обработка перемещения:

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

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

Оглавление