Полный список методов

Для использования SortableJS необходимо подключить библиотеку. Она доступна через npm, CDN или локально. После подключения создаётся экземпляр Sortable, привязанный к элементу списка:

import Sortable from 'sortablejs';

const el = document.getElementById('items');
const sortable = Sortable.create(el, {
    animation: 150
});

Ключевой момент: Sortable.create возвращает объект, который содержит все методы для управления сортировкой и взаимодействия с элементами списка.

Методы экземпляра Sortable

option(name, value)

Позволяет динамически изменять конфигурацию после инициализации.

  • Получение значения:
const animation = sortable.option('animation');
  • Установка значения:
sortable.option('animation', 300);

Особенность: Можно менять любые опции, которые поддерживает SortableJS, в том числе group, draggable, filter и другие.

toArray()

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

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

Полезно для: сохранения текущего порядка элементов на сервере.

sort(order)

Сортирует элементы по массиву идентификаторов.

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

Особенность: элементы, отсутствующие в массиве, остаются на своих местах, а новые элементы не добавляются.

save()

Сохраняет текущее состояние списка в store, если используется опция store.

sortable.save();

Применение: совместно с store для автоматического восстановления порядка при перезагрузке страницы.

destroy()

Удаляет экземпляр Sortable, снимая все слушатели событий и очищая внутренние данные.

sortable.destroy();

Важно: после вызова destroy объект больше не пригоден для работы с этим элементом, потребуется повторная инициализация.

closest(el)

Возвращает ближайший родительский элемент, который управляется SortableJS.

const parent = Sortable.closest(document.getElementById('nested-item'));

Используется для: поиска контейнера, если элемент перемещён внутри вложенных списков.

option(name)

Без второго аргумента возвращает текущее значение опции. Если передан второй аргумент, изменяет значение опции.

// Получение
const draggable = sortable.option('draggable');

// Изменение
sortable.option('draggable', '.item');

destroy()

Удаляет все события и разрывает связь с DOM.

sortable.destroy();

Особенность: отличается от null или удаления элемента DOM — объект полностью очищается.

serialize()

Возвращает объект с данными о порядке элементов, обычно с атрибутом data-id.

const data = sortable.serialize();
console.log(data); // { 'items': ['item1', 'item2', 'item3'] }

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

Работа с группами

Опция group позволяет создавать объединённые списки, где элементы можно перетаскивать между контейнерами.

const sortableA = new Sortable(elA, { group: 'shared' });
const sortableB = new Sortable(elB, { group: 'shared' });

Методы toArray, sort, save работают отдельно для каждого контейнера, но события onAdd, onRemove и onUpdate позволяют синхронизировать состояние.

Управление событиями

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

  • onStart — начало перетаскивания.
  • onEnd — завершение перетаскивания.
  • onAdd — добавление элемента из другого списка.
  • onUpdate — перестановка внутри одного списка.
  • onRemove — удаление элемента в результате перемещения в другой список.

Пример:

sortable.option('onEnd', function (evt) {
    console.log(`Элемент ${evt.item.dataset.id} перемещён`);
});

Работа с фильтрами

Опция filter позволяет исключить элементы из сортировки.

sortable.option('filter', '.disabled');

sortable.option('onFilter', function (evt) {
    evt.item.style.background = 'red';
});

Особенность: элементы, попавшие под фильтр, не могут быть перетаскиваемыми, но события могут быть обработаны отдельно.

Методы для управления DOM

SortableJS обеспечивает методы для прямой работы с элементами:

  • el — ссылка на DOM-элемент контейнера.
  • dragged — элемент, который в данный момент перетаскивается.
  • active — флаг состояния, true если перетаскивание активно.
if (sortable.active) {
    console.log('Перетаскивание активно');
}

Интеграция с другими библиотеками

SortableJS легко интегрируется с фреймворками: React, Vue, Angular. Методы toArray, sort и события onUpdate позволяют синхронизировать состояние списка с виртуальным DOM и состоянием приложения.

Хранение состояния

Опция store позволяет автоматически сохранять порядок элементов:

Sortable.create(el, {
    store: {
        get: function() {
            return JSON.parse(localStorage.getItem('sortable-order') || '[]');
        },
        set: function(sortable) {
            const order = sortable.toArray();
            localStorage.setItem('sortable-order', JSON.stringify(order));
        }
    }
});

Методы save и serialize тесно связаны с этой функциональностью и позволяют управлять сохранением вручную.

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

Оглавление