Конфигурация плагинов

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

const sortable = new Sortable(listElement, {
    animation: 150,
    handle: '.handle',
    ghostClass: 'ghost'
});

Ключевые моменты конфигурации:

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

Основные события

SortableJS предоставляет широкий набор событий для управления поведением и внешним видом элементов.

Основные события:

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

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

new Sortable(listElement, {
    onEnd: function (evt) {
        console.log(`Элемент ${evt.item.textContent} перемещён с позиции ${evt.oldIndex} на позицию ${evt.newIndex}`);
    }
});

Полезная информация о событиях:

  • Объект события (evt) содержит свойства item, from, to, oldIndex, newIndex.
  • Разделение событий позволяет точно управлять логикой приложения при перемещении элементов.

Расширение функционала через плагины

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

  • AutoScroll — обеспечивает автоматическую прокрутку контейнера при приближении к краю.
  • Swap — меняет элементы местами без анимации перетаскивания.
  • MultiDrag — позволяет выделять и перемещать несколько элементов одновременно.
  • OnSpill — управляет поведением элементов, «выброшенных» за пределы списка.

Подключение плагинов:

Sortable.mount(new Sortable.AutoScroll(), new Sortable.MultiDrag());

После подключения плагинов их поведение можно настроить через опции:

const sortable = new Sortable(listElement, {
    multiDrag: true,
    selectedClass: 'selected',
    autoScroll: true,
    scrollSensitivity: 30,
    scrollSpeed: 10
});

Объяснение опций плагинов:

  • selectedClass — CSS-класс для выделенных элементов при MultiDrag.
  • scrollSensitivity — минимальное расстояние до края контейнера, при котором начинается автопрокрутка.
  • scrollSpeed — скорость прокрутки при срабатывании AutoScroll.

Настройка ограничений и фильтров

SortableJS позволяет ограничивать перетаскивание элементов с помощью фильтров и групп:

  • filter — CSS-селектор элементов, которые нельзя перемещать.
  • preventOnFilter — предотвращает стандартное поведение браузера при попытке перемещения заблокированных элементов.
  • group — управляет доступом к другим спискам. Можно указать имя группы и направление взаимодействия (pull, put).

Пример конфигурации фильтров и групп:

new Sortable(listElement, {
    filter: '.disabled',
    preventOnFilter: true,
    group: {
        name: 'shared',
        pull: 'clone',
        put: true
    }
});
  • Элементы с классом .disabled нельзя перетаскивать.
  • Группа shared позволяет обмениваться элементами между списками с клонированием.

Настройка визуальных эффектов

SortableJS предоставляет гибкую настройку стилей при перемещении элементов:

  • ghostClass — стиль «призрака» во время перетаскивания.
  • chosenClass — CSS-класс для активного элемента, за который берутся.
  • dragClass — класс, применяемый к элементу во время фактического перетаскивания.
  • fallbackClass — класс для элементов, если браузер не поддерживает нативное перетаскивание.
new Sortable(listElement, {
    ghostClass: 'ghost',
    chosenClass: 'chosen',
    dragClass: 'dragging',
    fallbackClass: 'fallback'
});

Эти классы дают возможность полностью контролировать визуальное оформление и реакцию интерфейса.

Продвинутые методы API

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

  • toArray() — возвращает массив идентификаторов элементов.
  • sort(order) — сортирует элементы по переданному массиву идентификаторов.
  • save() и destroy() — сохраняет текущее состояние и уничтожает объект сортировки.
  • option(name, value) — получает или изменяет опцию на лету.
sortable.option('animation', 200);
const order = sortable.toArray();
sortable.sort(['item3', 'item1', 'item2']);

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

Интеграция с фреймворками

SortableJS легко интегрируется с React, Vue и Angular, сохраняя основной принцип работы через DOM-элементы и события. Для React и Vue существуют специальные обёртки (react-sortablejs, vue.draggable), которые упрощают связывание состояния компонентов с порядком элементов.

Оглавление