Инициализация библиотеки

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

Подключение библиотеки

SortableJS можно подключить несколькими способами:

  1. Через CDN
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
  1. Через npm
npm install sortablejs

После установки через npm используется импорт:

import Sortable from 'sortablejs';

Подключение через CDN удобно для быстрого прототипирования, а npm — для интеграции в современные сборщики модулей, такие как Webpack или Vite.

Создание экземпляра Sortable

Инициализация производится через вызов конструктора Sortable и передачу ему DOM-элемента контейнера и объекта настроек:

const list = document.getElementById('sortable-list');

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

Пояснение ключевых параметров:

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

Настройка поведения элементов

SortableJS позволяет гибко управлять элементами списка через множество опций:

  • draggable — CSS-селектор дочерних элементов, которые можно перетаскивать. По умолчанию это все прямые потомки контейнера.
  • group — настройка группировки списков для поддержки drag-and-drop между несколькими контейнерами. Может быть строкой (имя группы) или объектом с параметрами name, pull и put.
  • sort — булевое значение, разрешающее сортировку внутри контейнера. По умолчанию true.
  • filter — селектор элементов, которые нельзя перетаскивать.
  • preventOnFilter — булевое значение, указывающее, блокировать ли события по умолчанию для элементов, попавших в filter.

Пример с группировкой и фильтром:

const listA = document.getElementById('list-a');
const listB = document.getElementById('list-b');

Sortable.create(listA, {
    group: { name: 'shared', pull: 'clone', put: true },
    filter: '.disabled',
    animation: 200
});

Sortable.create(listB, {
    group: 'shared',
    animation: 200
});

События и обратные вызовы

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

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

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

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

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

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

Инициализация через Data-атрибуты

SortableJS поддерживает настройку прямо в HTML через data-* атрибуты, что упрощает интеграцию без явного Jav * aScript:

<ul id="sortable" data-sortable='{"animation": 150, "handle": ".handle"}'>
    <li class="handle">Элемент 1</li>
    <li class="handle">Элемент 2</li>
</ul>
<script>
    new Sortable(document.getElementById('sortable'));
</script>

Это особенно удобно для статических страниц или проектов с минимальным объемом JS.

Стилизация элементов при перетаскивании

CSS играет ключевую роль в визуальном оформлении drag-and-drop:

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

.sortable-chosen {
    border: 2px dashed #333;
}
  • sortable-ghost — элемент, который перемещается по экрану.
  • sortable-chosen — элемент, который пользователь только что выбрал для перетаскивания.

Эти классы можно настраивать для достижения плавной анимации и удобного UX при сортировке.

Особенности и ограничения

  • SortableJS работает только с блочными элементами (block-level) и списками DOM-элементов.
  • Для динамически создаваемых элементов необходимо пересоздавать или обновлять экземпляр.
  • Для сложных анимаций между списками рекомендуется использовать clone при pull, чтобы избежать мерцания элементов.
Оглавление