onUpdate и onSort

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

Событие onUpdate

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

Сигнатура события:

onUpdate: function (evt) {
    // evt.item - перемещаемый элемент
    // evt.oldIndex - исходная позиция элемента
    // evt.newIndex - новая позиция элемента
    // evt.from - контейнер, из которого был перемещён элемент
    // evt.to - контейнер, в который элемент перемещён
}

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

const list = document.getElementById('sortable-list');

Sortable.create(list, {
    onUpdate: function (evt) {
        console.log(`Элемент перемещён с позиции ${evt.oldIndex} на ${evt.newIndex}`);
        const items = Array.from(list.children).map(li => li.textContent);
        console.log('Текущий порядок элементов:', items);
    }
});

Ключевые моменты:

  • Событие onUpdate не срабатывает, если элемент перетаскивается, но остаётся на той же позиции.
  • В evt доступен объект item, который содержит ссылку на DOM-элемент, что позволяет напрямую работать с его атрибутами или данными.
  • Это событие идеально подходит для обновления состояния модели данных после изменения порядка элементов, например, для отправки новых индексов на сервер через AJAX.

Событие onSort

Событие onSort активируется при любом изменении порядка элементов, включая перемещения между контейнерами, и даже если фактического изменения порядка не произошло, оно всё равно срабатывает. Это делает его более общим по сравнению с onUpdate.

Сигнатура события:

onSort: function (evt) {
    // evt.item - перемещаемый элемент
    // evt.oldIndex - исходная позиция элемента
    // evt.newIndex - новая позиция элемента
    // evt.from - контейнер, из которого элемент перетаскивался
    // evt.to - контейнер, в который элемент помещён
    // evt.clone - клон элемента при использовании clone
}

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

Sortable.create(list, {
    onSort: function (evt) {
        console.log(`Элемент ${evt.item.textContent} был отсортирован`);
        console.log(`Старый индекс: ${evt.oldIndex}, новый индекс: ${evt.newIndex}`);
    }
});

Особенности onSort:

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

Сравнение onUpdate и onSort

Свойство onUpdate onSort
Срабатывает при Фактическом изменении порядка элементов Любой сортировке (даже без изменения позиции)
Многоконтейнерность Поддерживается через evt.from и evt.to Полностью поддерживается
Использование Обновление данных после перемещения Реакции во время сортировки, визуальные эффекты
Типичные задачи Синхронизация с моделью данных Ограничение перетаскивания, подсветка, контроль логики

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

Часто на практике события onUpdate и onSort применяются совместно: onSort для интерактивных эффектов, onUpdate — для окончательного сохранения порядка элементов.

Sortable.create(list, {
    animation: 150,
    onSort: function (evt) {
        evt.item.style.backgroundColor = '#f0f0f0';
    },
    onUpdate: function (evt) {
        evt.item.style.backgroundColor = '';
        const newOrder = Array.from(list.children).map(li => li.dataset.id);
        console.log('Новый порядок ID элементов:', newOrder);
    }
});

В этом примере изменение фона происходит во время перетаскивания через onSort, а обновление порядка данных и сброс стиля происходит при завершении перемещения через onUpdate.

Практические советы

  • Для массивов данных удобно использовать Array.prototype.splice вместе с evt.oldIndex и evt.newIndex для перестановки элементов.
  • Если требуется блокировать перемещение определённых элементов, событие onMove лучше использовать совместно с onSort.
  • Использование animation вместе с событиями onSort делает интерфейс более плавным и отзывчивым.
  • В многоконтейнерных интерфейсах важно учитывать evt.from и evt.to, чтобы корректно обновлять данные соответствующих списков.

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

Оглавление