multiDragKey и selectedClass

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

multiDragKey

Параметр multiDragKey определяет клавишу модификатора, при удержании которой можно выбрать несколько элементов. По умолчанию множественный выбор отключен.

Синтаксис:

multiDragKey: "ctrl" | "meta" | "shift" | false
  • "ctrl" — элементы добавляются в выбор при удержании клавиши Ctrl.
  • "meta" — используется клавиша Command на macOS или Windows Key на Windows.
  • "shift" — выбор диапазона элементов.
  • false — множественный выбор отключен.

Пример настройки:

const sortable = new Sortable(document.getElementById('items'), {
    multiDrag: true,
    multiDragKey: "ctrl",
});

В данном примере множественный выбор активируется при удержании клавиши Ctrl, а все выбранные элементы можно перетаскивать как единый блок.

selectedClass

Параметр selectedClass задаёт CSS-класс, который применяется к выбранным элементам. Он позволяет визуально обозначить выделение, что особенно важно при работе с длинными списками.

Синтаксис:

selectedClass: string
  • Любое название CSS-класса.
  • Позволяет полностью контролировать стили выделения через CSS.

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

const sortable = new Sortable(document.getElementById('items'), {
    multiDrag: true,
    multiDragKey: "ctrl",
    selectedClass: "selected"
});

И соответствующий CSS:

.selected {
    background-color: #d0ebff;
    border: 1px solid #74c0fc;
}

Выбранные элементы визуально подсвечиваются, и пользователь точно видит, какие элементы входят в текущий выбор.

Поведение при drag-and-drop

При использовании multiDrag все выбранные элементы перемещаются одновременно. Важные моменты:

  1. Начало перетаскивания — drag начинается с любого выбранного элемента.
  2. Отображение при перемещении — визуально перемещается один элемент, но библиотека отслеживает все выбранные элементы.
  3. Drop — все выделенные элементы вставляются в новую позицию, сохраняя порядок.

Пример с обработкой событий:

const sortable = new Sortable(document.getElementById('items'), {
    multiDrag: true,
    multiDragKey: "ctrl",
    selectedClass: "selected",
    onEnd: function(evt) {
        console.log('Элементы перемещены:', evt.items);
    }
});
  • evt.items содержит массив всех перемещённых элементов.
  • Позволяет реализовать дополнительную логику после перемещения, например, обновление состояния на сервере.

Особенности взаимодействия с клавишами

  • ctrl и meta позволяют добавлять или убирать отдельные элементы из текущего выбора.
  • shift удобен для выбора диапазона элементов между последним выбранным и текущим.
  • Если клавиша не удерживается, выбор очищается, и начинается стандартный drag одного элемента.

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

  1. Всегда задавать selectedClass, чтобы визуально различать выбранные элементы.
  2. При использовании shift важно отслеживать порядок элементов, чтобы диапазон выделения был корректным.
  3. Для динамических списков можно комбинировать multiDrag с swap или animation, чтобы улучшить визуальное восприятие при перетаскивании.

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

Оглавление