Множественный выбор

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

Настройка множественного выбора

Для активации множественного выбора используется модуль MultiDrag. Этот модуль расширяет базовую функциональность Draggable и позволяет выделять несколько элементов с помощью клавиш-модификаторов или классических методов выделения.

import { Draggable, MultiDrag } from '@shopify/draggable';

const container = document.querySelector('.draggable-container');
const draggable = new Draggable(container, {
  draggable: '.draggable-item',
  plugins: [MultiDrag],
  multiDrag: true, // включение множественного выбора
  selectedClass: 'is-selected', // CSS-класс для выделенных элементов
});

Ключевые опции MultiDrag:

  • multiDrag: Булевый флаг, активирующий возможность множественного выбора.
  • selectedClass: Класс, который добавляется к выделенным элементам.
  • appendTo: Определяет, куда будут добавляться «клоновые» элементы при перетаскивании. По умолчанию используется document.body.

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

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

  1. С помощью клавиши Ctrl/Command: удерживая клавишу Ctrl (Windows) или Command (Mac), пользователь может выбирать несколько объектов по одному.
  2. Через Shift для диапазона: позволяет выделить все элементы между текущим выделением и новым элементом.
draggable.on('drag:start', (event) => {
  console.log('Начало перетаскивания выбранных элементов', event.data.source);
});

Взаимодействие с событиями

Модуль MultiDrag интегрируется с основными событиями Draggable, такими как drag:start, drag:move, drag:stop. В случае множественного выбора события предоставляют доступ к всему массиву выделенных элементов, что позволяет обрабатывать их одновременно.

draggable.on('drag:stop', (event) => {
  const selectedItems = draggable.multiDrag.getSelectedElements();
  console.log('Перемещенные элементы:', selectedItems);
});

Методы MultiDrag:

  • getSelectedElements(): возвращает массив DOM-элементов, которые были выбраны.
  • selectElement(element): программно выделяет конкретный элемент.
  • deselectElement(element): снимает выделение.
  • clearSelection(): сбрасывает все выделения.

Настройка внешнего вида и поведения

CSS играет ключевую роль для визуальной индикации выделения. Например:

.draggable-item.is-selected {
  border: 2px dashed #4a90e2;
  background-color: rgba(74, 144, 226, 0.1);
}

Можно также использовать клоновые элементы при перетаскивании нескольких объектов, чтобы избежать сдвига исходных DOM-элементов:

draggable.on('mirror:created', (event) => {
  const mirror = event.data.mirror;
  mirror.style.opacity = '0.7';
  mirror.style.borderRadius = '4px';
});

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

  • MultiDrag не поддерживает вложенные Draggable-элементы с пересекающимися контейнерами без дополнительной логики.
  • При множественном выборе следует учитывать производительность при больших списках — каждый выбранный элемент создается в виде «зеркала» при drag.
  • Взаимодействие с другими плагинами, например, SwapAnimation или Sortable, требует явного конфигурирования, чтобы избежать конфликтов.

Примеры применения

  1. Сортировка списка товаров: пользователь может выбрать несколько карточек товаров и переместить их в нужный порядок.
  2. Перетаскивание элементов на панель: выделенные элементы можно перемещать группой на другой контейнер для пакетной обработки.
  3. Массовое удаление: после выбора нескольких элементов можно их одновременно удалить или применить к ним одно действие.

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

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

const counter = document.querySelector('.selected-counter');

draggable.on('drag:start', () => {
  const count = draggable.multiDrag.getSelectedElements().length;
  counter.textContent = `${count} элементов выбрано`;
});

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

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

// Выделяем все элементы с определенным классом
document.querySelectorAll('.draggable-item.highlight').forEach(el => {
  draggable.multiDrag.selectElement(el);
});

Такой подход обеспечивает гибкость и расширяемость интерфейса без необходимости менять внутреннюю логику Draggable.

Множественный выбор в Shopify Draggable — это мощный инструмент для управления сложными интерфейсами с большим количеством элементов. Он предоставляет полный контроль над выделением, перетаскиванием и визуальной индикацией, позволяя создавать продвинутые решения для электронной коммерции и веб-приложений.

Оглавление