Установка и подключение

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

Установка через npm

Для проектов, где используется современная система сборки модулей (Webpack, Vite, Parcel), рекомендуется установка через npm:

npm install sortablejs --save

После установки библиотеку можно импортировать в проект:

import Sortable from 'sortablejs';

Импорт может быть выполнен как в стандартном модуле ES6, так и в CommonJS:

// ES6
import Sortable from 'sortablejs';

// CommonJS
const Sortable = require('sortablejs');

Подключение через CDN

Для простых проектов без сборки модулей доступен вариант подключения через CDN. Это позволяет использовать библиотеку без установки и интеграции в систему сборки:

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

После подключения через CDN объект Sortable становится доступен глобально, и его можно использовать напрямую в скриптах:

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

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

Для того чтобы элементы списка стали перетаскиваемыми, необходимо создать экземпляр Sortable, передав в конструктор DOM-элемент и объект с настройками:

const sortable = new Sortable(document.getElementById('my-list'), {
    animation: 200,        // Время анимации перемещения элементов в миллисекундах
    ghostClass: 'ghost',   // Класс, применяемый к элементу, который перетаскивается
    handle: '.handle',     // Указывает, что перетаскивание возможно только за определённый элемент внутри элемента списка
    chosenClass: 'chosen', // Класс для выбранного элемента
    draggable: '.item'     // Ограничение элементов, которые можно перетаскивать
});

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

  • animation отвечает за плавность перемещения элементов.
  • ghostClass и chosenClass позволяют визуально выделять элементы во время перетаскивания.
  • handle ограничивает область, с которой элемент можно захватить.
  • draggable задаёт селектор элементов, которые участвуют в drag-and-drop.

Интеграция с несколькими списками

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

const sortable1 = new Sortable(document.getElementById('list1'), {
    group: 'shared',
    animation: 150
});

const sortable2 = new Sortable(document.getElementById('list2'), {
    group: 'shared',
    animation: 150
});

Все списки с одинаковым значением group становятся взаимосвязанными, и элементы можно перемещать между ними. Дополнительно можно настроить ограничения:

  • pull: позволяет или запрещает вынос элементов из списка.
  • put: разрешает или запрещает добавление элементов из других списков.

Подключение стилей

Хотя SortableJS не требует обязательного CSS, добавление стилей для классов ghostClass и chosenClass улучшает визуальное восприятие:

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

.chosen {
    background-color: #d0f0d0;
}

Эти классы динамически применяются библиотекой при начале перетаскивания и выборе элемента.

Настройка через опции

Полный набор опций SortableJS позволяет гибко управлять поведением:

  • sort: включение или отключение сортировки внутри списка.
  • delay и touchStartThreshold: управление временем и чувствительностью для тач-устройств.
  • swap и swapClass: реализация обмена элементов при наведении.
  • onStart, onEnd, onAdd, onRemove, onUpdate: обработчики событий для отслеживания действий пользователя.

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

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

Особенности использования в современных проектах

  • SortableJS совместим с фреймворками Vue, React, Angular через обёртки или прямое использование.
  • При работе с виртуальными списками рекомендуется использовать методы toArray и fromArray для синхронизации состояния DOM с данными.
  • Для мобильных устройств можно управлять поведением через опции touchStartThreshold и fallbackOnBody.

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

Оглавление