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

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

Подключение плагинов: базовые принципы

Плагины в SortableJS подключаются аналогично обычным модулям JavaScript. Возможны следующие способы:

  1. Через npm или Yarn Установка осуществляется стандартным пакетом:

    npm install sortablejs

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

    import Sortable from 'sortablejs';
import AutoScroll from 'sortablejs/plugins/AutoScroll';
import Swap from 'sortablejs/plugins/Swap';

    Плагины регистрируются при инициализации:

    const sortable = new Sortable(listElement, {
    plugins: [AutoScroll, Swap]
});

  2. Через CDN Для проектов без сборщика модулей можно использовать подключение через CDN:

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

    После подключения плагины регистрируются через глобальные объекты:

    const sortable = new Sortable(listElement, {
    plugins: [Sortable.AutoScroll]
});

Основные плагины SortableJS

1. AutoScroll Плагин обеспечивает автоматическую прокрутку контейнера при перетаскивании элементов за пределы видимой области. Ключевые опции:

  • scroll — элемент-контейнер для скролла (по умолчанию window).
  • scrollSensitivity — расстояние до края контейнера, при котором начинается прокрутка.
  • scrollSpeed — скорость прокрутки в пикселях за кадр.

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

const sortable = new Sortable(listElement, {
    plugins: [Sortable.AutoScroll],
    autoScroll: true,
    scrollSensitivity: 50,
    scrollSpeed: 10
});

2. Swap Позволяет мгновенно обменивать элементы местами при перетаскивании, вместо обычного сдвига. Полезно для сеток и интерактивных интерфейсов.

Основные настройки:

  • swapClass — CSS-класс для визуального выделения элемента во время перетаскивания.
  • swapThreshold — процент пересечения элемента для активации обмена (0–1).

Пример:

const sortable = new Sortable(gridElement, {
    plugins: [Sortable.Swap],
    swapThreshold: 0.65,
    swapClass: 'highlight-swap'
});

3. MultiDrag Позволяет выделять несколько элементов и перемещать их группой. Основные опции:

  • selectedClass — класс выделенных элементов.
  • multiDragKey — клавиша-модификатор для множественного выделения (например, Shift или Ctrl).

Пример:

const sortable = new Sortable(listElement, {
    plugins: [Sortable.MultiDrag],
    multiDrag: true,
    selectedClass: 'selected',
    multiDragKey: 'Shift'
});

Рекомендации по использованию плагинов

  1. Совместимость плагинов Некоторые плагины могут конфликтовать при одновременном использовании. Например, Swap и MultiDrag требуют аккуратного тестирования, чтобы избежать ошибок при перетаскивании группы элементов.

  2. Настройка CSS для визуализации Большинство плагинов используют классы для выделения элементов. Для корректного отображения рекомендуется заранее подготовить стили:

.highlight-swap {
    border: 2px dashed #007bff;
}
.selected {
    background-color: rgba(0, 123, 255, 0.2);
}
  1. Производительность Для списков с большим количеством элементов подключение нескольких плагинов может снижать отзывчивость интерфейса. Оптимизация включает:
  • ограничение области перетаскивания;
  • отключение анимаций, если они не критичны;
  • использование делегирования событий вместо индивидуальной привязки к каждому элементу.

Регистрируем собственный плагин

SortableJS позволяет создавать пользовательские плагины. Структура плагина включает методы start, end, update и др., которые вызываются во время взаимодействия с элементами.

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

const CustomHighlightPlugin = {
    start(evt) {
        evt.item.classList.add('dragging');
    },
    end(evt) {
        evt.item.classList.remove('dragging');
    }
};

const sortable = new Sortable(listElement, {
    plugins: [CustomHighlightPlugin]
});

Инициализация нескольких плагинов одновременно

SortableJS поддерживает массив плагинов в опции plugins. Они применяются в порядке перечисления. Важно учитывать, что конфликты между плагинами решаются на уровне их настроек:

const sortable = new Sortable(listElement, {
    plugins: [Sortable.MultiDrag, Sortable.Swap, Sortable.AutoScroll],
    multiDrag: true,
    swapThreshold: 0.65,
    autoScroll: true
});

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

  • Плагины подключаются через plugins при инициализации Sortable.
  • Каждому плагину можно передавать собственные опции для точной настройки поведения.
  • Совместимость и порядок подключения критически влияют на корректную работу.
  • Пользовательские плагины позволяют расширять функциональность без изменения исходного кода библиотеки.
Оглавление