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

SortableJS — это мощная библиотека для реализации интерактивного перетаскивания элементов на веб-странице. Основу её работы составляет создание экземпляра класса Sortable, который управляет списком элементов и предоставляет множество методов для динамического контроля поведения сортировки. Методы экземпляра позволяют управлять элементами, изменять параметры, программно инициировать действия и получать информацию о состоянии списка.

destroy()

Метод destroy() полностью уничтожает экземпляр Sortable, удаляя все обработчики событий и восстанавливая исходное состояние DOM. После вызова этого метода экземпляр становится неактивным и больше не реагирует на пользовательские действия.

const sortable = new Sortable(list, { /* опции */ });
sortable.destroy();

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

  • Очищает все слушатели событий, включая drag, drop и перемещения.
  • Не удаляет элементы из DOM, но отменяет функциональность сортировки.
  • Полезно при динамической замене списков или отключении функционала сортировки.

option(name, value)

Метод option служит для чтения и изменения параметров экземпляра после его создания. Может использоваться в двух вариантах: чтение значения опции и установка новой.

// Получение значения опции
const groupName = sortable.option('group');

// Изменение значения опции
sortable.option('animation', 150);

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

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

toArray()

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

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

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

  • Удобно использовать для синхронизации порядка элементов с сервером.
  • Работает только с элементами, у которых указан data-id.
  • Порядок массива соответствует текущему визуальному расположению элементов.

sort(order)

Метод sort позволяет программно изменить порядок элементов внутри списка в соответствии с переданным массивом идентификаторов.

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

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

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

save()

Метод save инициирует сохранение текущего состояния списка. Обычно используется совместно с store, если задан объект для хранения порядка элементов.

sortable.save();

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

  • Вызывает функцию set объекта store, если она определена.
  • Позволяет интегрировать SortableJS с локальным хранилищем или серверной синхронизацией.
  • Не изменяет порядок элементов, только фиксирует текущее состояние.

closest(el)

Метод возвращает ближайший контейнер Sortable, которому принадлежит элемент el. Полезен при работе с вложенными списками или drag-and-drop между несколькими контейнерами.

const container = sortable.closest(document.getElementById('item1'));

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

  • Возвращает сам экземпляр Sortable, если элемент находится внутри контейнера.
  • Если элемент не принадлежит текущему экземпляру, возвращает null.
  • Упрощает обработку событий drag-and-drop на уровне отдельных элементов.

captureAnimationState()

Метод сохраняет текущее состояние анимации элементов. Используется перед программным изменением DOM, чтобы после перестановки применить плавную анимацию.

sortable.captureAnimationState();

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

  • Полезен при сложных манипуляциях с элементами, которые не инициируются пользователем напрямую.
  • Работает совместно с animateAll() для запуска анимации перестановки.

animateAll()

Метод запускает анимацию для всех элементов, положение которых изменилось с момента вызова captureAnimationState().

sortable.captureAnimationState();
// изменение DOM
sortable.animateAll();

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

  • Используется для визуального эффекта при динамическом изменении списка.
  • Позволяет сохранить плавность интерфейса при программных перестановках элементов.
  • Требует наличия CSS-анимации, настроенной через опцию animation.

closest(el) и методические сценарии

Комбинируя методы closest, toArray и sort, можно реализовать сложные сценарии взаимодействия с несколькими списками:

  • Программное перемещение элементов между контейнерами.
  • Динамическая сортировка по данным сервера.
  • Анимационное переключение порядка без вмешательства пользователя.

Методы экземпляра SortableJS предоставляют полный контроль над поведением списков. Их грамотное использование позволяет создавать как простые интерактивные списки, так и сложные интерфейсы с анимацией, сохранением состояния и поддержкой drag-and-drop между несколькими контейнерами.

Оглавление