Обновление списка

SortableJS — это мощная и гибкая библиотека на JavaScript, предназначенная для реализации функционала перетаскивания элементов внутри списка или между списками. Она позволяет создавать интерактивные интерфейсы с поддержкой drag-and-drop, минимизируя количество собственного кода и обеспечивая широкие возможности настройки.

Для создания сортируемого списка достаточно подключить библиотеку и инициализировать Sortable на выбранном DOM-элементе:

import Sortable from 'sortablejs';

const list = document.getElementById('items');
Sortable.create(list, {
    animation: 150,
    ghostClass: 'sortable-ghost',
});

Ключевые параметры:

  • animation — время анимации перемещения элемента в миллисекундах.
  • ghostClass — CSS-класс, который применяется к элементу во время перетаскивания.
  • handle — позволяет задать только часть элемента для захвата перетаскивания.
  • draggable — селектор элементов, которые можно перетаскивать внутри контейнера.

Методы для обновления списка

SortableJS предоставляет ряд методов для динамического управления списком после его создания:

  1. toArray() — возвращает массив идентификаторов элементов в текущем порядке.

    const order = sortable.toArray();
console.log(order); // ['item1', 'item3', 'item2']

    Применение: полезно для синхронизации состояния интерфейса с сервером.

  2. sort(order) — переставляет элементы в контейнере согласно переданному массиву идентификаторов.

    sortable.sort(['item3', 'item1', 'item2']);

    Важно: идентификаторы элементов должны совпадать с атрибутами id или data-id.

  3. add() и remove() — методы для добавления и удаления элементов программно, при этом Sortable автоматически учитывает их в текущем порядке.

  4. destroy() — удаляет функционал сортировки с контейнера, оставляя элементы на месте.

  5. save() и load() — вспомогательные методы, позволяющие сохранять порядок элементов в localStorage и восстанавливать его после перезагрузки страницы.

События обновления

Для динамической работы с обновленным списком ключевым является событие onEnd, которое срабатывает после завершения перетаскивания:

Sortable.create(list, {
    onEnd: function (evt) {
        console.log('Элемент перемещен:', evt.item);
        console.log('Новый порядок:', sortable.toArray());
    }
});

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

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

Для сложных интерфейсов можно объединять события onAdd, onUpdate и onRemove, чтобы отслеживать изменения при добавлении, обновлении и удалении элементов. Это особенно важно при синхронизации с сервером через API.

Динамическое обновление контента

SortableJS позволяет изменять содержимое списка без полной перезагрузки:

  • Добавление элементов:
const newItem = document.createElement('li');
newItem.id = 'item4';
newItem.textContent = 'Новый элемент';
list.appendChild(newItem);
sortable.option("draggable", "li");
  • Удаление элементов:
const itemToRemove = document.getElementById('item2');
list.removeChild(itemToRemove);

После внесения изменений можно вызвать sortable.sort() или использовать toArray() для получения актуального порядка.

Обновление списка при внешних изменениях

При изменении DOM вне SortableJS (например, через фреймворк или AJAX) необходимо синхронизировать внутреннее состояние библиотеки:

sortable.destroy(); // Удаление старой инициализации
Sortable.create(list, { animation: 150 }); // Повторная инициализация

Альтернативный способ — использовать метод sort() с новым порядком элементов, чтобы обновить отображение без разрушения объекта Sortable.

Настройка совместной работы списков

SortableJS поддерживает взаимодействие нескольких списков через опцию group:

Sortable.create(list1, { group: 'shared', animation: 150 });
Sortable.create(list2, { group: 'shared', animation: 150 });

Элементы могут перемещаться между списками, а события onAdd и onRemove позволяют отслеживать перемещения и обновлять данные.

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

  • pull и put — управление доступностью перетаскивания между списками.
  • sort — указывает, можно ли сортировать внутри контейнера.
  • Использование onEnd в комбинации с evt.from и evt.to позволяет корректно обновлять состояние всех связанных списков.

Оптимизация работы с большими списками

Для списков с большим количеством элементов важно:

  • Использовать animation: 0 при массовых обновлениях, чтобы избежать лагов.
  • Применять virtual rendering при необходимости отрисовки сотен и тысяч элементов.
  • Вызывать toArray() и сохранять порядок только при завершении всех изменений, а не после каждого перемещения, чтобы снизить нагрузку на браузер.

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

Оглавление