Vanilla JavaScript

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

Библиотека не требует сторонних зависимостей и легко интегрируется в существующий проект, предоставляя богатый API для тонкой настройки поведения перетаскивания.

Подключение и инициализация

SortableJS можно подключить через CDN:

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

Или установить через npm:

npm install sortablejs

Создание sortable-списка выполняется следующим образом:

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

Параметры:

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

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

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

Ключевые события:

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

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

const sortable = new Sortable(list, {
    animation: 150,
    onEnd: function (evt) {
        console.log(`Элемент перемещен с позиции ${evt.oldIndex} на ${evt.newIndex}`);
    }
});

evt содержит важные свойства:

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

Свойства и опции

SortableJS имеет множество настроек, позволяющих управлять поведением:

  • group — позволяет создавать связь между несколькими списками, делая возможным перенос элементов между ними.
const list1 = document.getElementById('list1');
const list2 = document.getElementById('list2');

new Sortable(list1, { group: 'shared', animation: 150 });
new Sortable(list2, { group: 'shared', animation: 150 });
  • sort — разрешает или запрещает сортировку внутри списка (true по умолчанию).
  • disabled — полностью отключает перетаскивание (true/false).
  • filter — CSS-селектор элементов, которые нельзя перетаскивать.
  • handle — CSS-селектор области, за которую можно перетаскивать элемент.
  • draggable — CSS-селектор элементов, которые можно перетаскивать.
  • swapThreshold — порог для активации смены позиции элемента (значение от 0 до 1).
  • invertSwap — логика инверсии при смене элементов.

Интеграция с динамическим контентом

SortableJS корректно работает с элементами, добавляемыми в DOM динамически. Для этого достаточно убедиться, что новая разметка соответствует селекторам draggable и что инициализация списка выполнена после добавления элементов:

const container = document.getElementById('dynamic-list');

const sortable = new Sortable(container, {
    animation: 200,
    draggable: '.draggable-item'
});

// Добавление нового элемента
const newItem = document.createElement('li');
newItem.className = 'draggable-item';
newItem.textContent = 'Новый элемент';
container.appendChild(newItem);

Sortable автоматически будет учитывать новые элементы в списке.

Стилизация элементов

CSS-классы ghostClass, chosenClass, dragClass позволяют создавать визуальные эффекты для перетаскиваемых элементов. Рекомендуется использовать transition для плавной анимации:

.sortable-ghost {
    opacity: 0.4;
    background-color: #e0e0e0;
}

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

.draggable-item {
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 5px;
    cursor: grab;
    user-select: none;
    transition: all 0.2s ease;
}

Мультисписочные взаимодействия

Использование опции group позволяет создавать drag-and-drop между несколькими списками, включая такие возможности как копирование элементов или запрещение перемещения:

new Sortable(list1, {
    group: {
        name: 'shared',
        pull: 'clone', // копирование при перетаскивании
        put: false     // запрещаем добавление извне
    },
    animation: 150
});

Расширенные возможности

  • Сортировка сеток: SortableJS можно применять не только к линейным спискам, но и к сеткам элементов с поддержкой адаптивного дизайна.
  • Поддержка сенсорных устройств: библиотека корректно работает на мобильных устройствах с тач-экраном.
  • API для программного управления: можно перемещать элементы программно через методы sortable.sort() или sortable.toArray(), что удобно для сохранения состояния на сервере.
// Получение массива ID элементов в текущем порядке
const order = sortable.toArray();

// Программная сортировка по массиву ID
sortable.sort(['item3', 'item1', 'item2']);

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

Оглавление