Что такое SortableJS

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

import Sortable from 'sortablejs';

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

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

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

Создание сортируемого списка

SortableJS может работать с любыми HTML-элементами. Чаще всего применяются <ul> и <li>, однако поддерживаются и <div> с внутренними элементами. Элементы можно сортировать в пределах одного контейнера или между несколькими контейнерами.

<ul id="sortable-list">
    <li>Элемент 1</li>
    <li>Элемент 2</li>
    <li>Элемент 3</li>
</ul>
new Sortable(document.getElementById('sortable-list'), {
    animation: 200,
    handle: '.handle',
    draggable: 'li',
    onEnd: function (evt) {
        console.log(`Элемент перемещён с позиции ${evt.oldIndex} на ${evt.newIndex}`);
    }
});

Особенности работы с индексами:

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

Поддержка нескольких контейнеров

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

const lists = document.querySelectorAll('.sortable-container');

lists.forEach(list => {
    new Sortable(list, {
        group: 'shared',
        animation: 150,
        onAdd: function(evt) {
            console.log('Элемент добавлен в список:', evt.to.id);
        }
    });
});

Параметр group:

  • Если у нескольких контейнеров одинаковое значение group, элементы можно перемещать между ними.
  • pull и put задают направление перемещения: pull: 'clone' позволяет копировать элементы, put: false запрещает вставку.

Пользовательские события

SortableJS предоставляет гибкий набор событий для интеграции с бизнес-логикой:

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

Каждое событие получает объект evt с подробной информацией о перемещении, включая item, from, to, oldIndex, newIndex.

Настройка внешнего вида и анимации

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

  • Ghost элемент: визуально отображается полупрозрачный элемент, который следует за курсором.
  • Chosen класс: CSS-класс применяется к выбранному элементу, что позволяет стилизовать активный элемент.
  • Animation: плавное перемещение элементов в пределах контейнера при изменении порядка.

Пример CSS:

.sortable-ghost {
    opacity: 0.4;
}

.sortable-chosen {
    background-color: #f0f0f0;
}

Работа с динамическими элементами

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

const list = document.getElementById('sortable-list');
const newItem = document.createElement('li');
newItem.textContent = 'Новый элемент';
list.appendChild(newItem);
sortable.addEventListener('onUpdate', () => console.log('Список обновлен'));

Методы API

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

  • toArray() — возвращает массив идентификаторов элементов в текущем порядке.
  • sort(orderArray) — сортирует элементы согласно переданному массиву.
  • save() и destroy() — сохраняет состояние и полностью удаляет экземпляр библиотеки.
  • option(name, value) — динамическая смена опций после инициализации.

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

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

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

Оглавление