MultiDrag

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

Подключение MultiDrag

Для использования MultiDrag необходимо подключить саму библиотеку SortableJS и активировать соответствующую опцию:

import Sortable from 'sortablejs';
import 'sortablejs/modular/sortable.core.esm.js';
import MultiDrag from 'sortablejs/plugins/MultiDrag';

Sortable.mount(new MultiDrag());

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

const sortable = new Sortable(list, {
    multiDrag: true,          // Включение MultiDrag
    selectedClass: 'selected', // Класс для выделенных элементов
    fallbackTolerance: 5,      // Минимальное смещение для начала перетаскивания
});

Ключевые параметры MultiDrag:

  • multiDrag — активация возможности множественного выбора.
  • selectedClass — CSS-класс, который будет присваиваться выделенным элементам.
  • fallbackTolerance — чувствительность к движению мыши для начала перетаскивания.

Выбор нескольких элементов

Выделение нескольких элементов происходит с помощью стандартных методов управления:

  • Ctrl + клик — добавление или снятие элемента с текущего выбора.
  • Shift + клик — выделение диапазона элементов между последним выбранным и текущим.
  • Клик без модификаторов — сброс предыдущего выбора и выделение только одного элемента.

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

Перетаскивание группы

Когда выделено несколько элементов, перетаскивание одного из них перемещает всю выбранную группу. Поведение можно настроить через следующие параметры:

  • multiDragKey — задаёт модификатор для множественного выбора. По умолчанию это клавиша Ctrl или Cmd.
  • forceFallback — если установлен в true, используется эмуляция перетаскивания, что позволяет избежать проблем с нативным Drag and Drop в некоторых браузерах.
  • invertSwap — если true, элементы группы вставляются в обратном порядке относительно исходного положения.

Пример настройки с дополнительными опциями:

const sortable = new Sortable(list, {
    multiDrag: true,
    selectedClass: 'selected',
    multiDragKey: 'Shift',
    forceFallback: true,
    invertSwap: true
});

События MultiDrag

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

  • select — вызывается при выделении элемента.
  • deselect — вызывается при снятии выделения с элемента.
  • dragStart — срабатывает при начале перетаскивания выбранной группы.
  • dragEnd — завершение перетаскивания, после которого можно обработать новое расположение элементов.
  • sort — изменение порядка элементов в контейнере.

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

sortable.option("onSelect", function (evt) {
    console.log("Элемент выбран:", evt.item);
});

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

Для визуальной обратной связи важно использовать класс selected. Можно задавать различные стили:

.selected {
    background-color: #d0eaff;
    border: 1px solid #3399ff;
}

Также можно комбинировать классы для разных состояний, например, при наведении или при перетаскивании.

Интеграция с другими функциональными возможностями SortableJS

MultiDrag хорошо сочетается с такими функциями, как swap, animation, filter и handle. Это позволяет создавать гибкие интерфейсы, где одновременно реализованы:

  • Плавная анимация при перемещении группы элементов.
  • Ограничение перетаскивания по определённым элементам с помощью handle.
  • Фильтрация элементов, которые нельзя выделить или перетащить.

Пример интеграции с анимацией и фильтрацией:

const sortable = new Sortable(list, {
    multiDrag: true,
    selectedClass: 'selected',
    animation: 200,
    filter: '.no-drag',
    handle: '.drag-handle'
});

Практические советы

  • Всегда использовать визуальные подсказки для выделенных элементов, чтобы пользователь понимал, какие элементы будут перемещены.
  • Настраивать multiDragKey в зависимости от платформы (например, Ctrl для Windows и Cmd для macOS), чтобы поведение было привычным.
  • Проверять взаимодействие MultiDrag с другими плагинами и стилями, особенно при работе с таблицами и списками, где элементы имеют сложную вложенность.

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

Оглавление