Программная конфигурация

Библиотека Shopify Draggable предоставляет мощный API для создания перетаскиваемых интерфейсов в веб-приложениях. Основная сила библиотеки заключается в гибкой конфигурации, которая позволяет адаптировать поведение drag-and-drop под конкретные задачи. Конфигурация задается при создании экземпляра Draggable, а также через расширения (plugins), которые изменяют стандартные механизмы библиотеки.

Инициализация Draggable и базовые опции

Создание экземпляра происходит через конструктор:

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

const draggable = new Draggable(document.querySelectorAll('.draggable-container'), {
  draggable: '.draggable-item',
  delay: 0,
  mirror: {
    constrainDimensions: true,
  },
  scrollable: {
    draggable: '.draggable-item',
    scrollableElements: ['.scrollable-container'],
    sensitivity: 30,
    speed: 6,
  },
});

Ключевые параметры конструктора:

  • draggable – CSS-селектор элементов, которые можно перетаскивать.

  • delay – задержка перед началом drag (в миллисекундах).

  • mirror – объект, управляющий зеркальной копией элемента во время перетаскивания.

    • constrainDimensions – сохраняет ширину и высоту оригинала.

  • scrollable – настройки автоматической прокрутки контейнера при перетаскивании.

    • sensitivity и speed определяют скорость и чувствительность скролла.

Эти параметры создают базовую конфигурацию и позволяют сразу контролировать основные аспекты drag-and-drop.

Плагины и расширения функционала

Draggable построен с модульной архитектурой. Плагины подключаются через опцию plugins:

import { Sortable } from '@shopify/draggable';

const sortable = new Draggable(document.querySelectorAll('.sortable-list'), {
  draggable: '.sortable-item',
  plugins: [Sortable],
});

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

  • Sortable – позволяет перемещать элементы внутри контейнера и между контейнерами.
  • Swappable – обеспечивает обмен местами двух элементов.
  • Collidable – позволяет отслеживать пересечения элементов при перетаскивании.
  • Droppable – задает целевые зоны для дропа элементов.

Каждый плагин имеет собственные настройки. Например, Sortable поддерживает опции:

  • swapAnimation – плавность анимации при обмене местами.
  • dragClass – CSS-класс для перетаскиваемого элемента.
  • chosenClass – класс, применяемый к элементу при начале перетаскивания.

События и их обработка

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

draggable.on('drag:start', (event) => {
  console.log('Начало перетаскивания:', event.source);
});

draggable.on('drag:move', (event) => {
  console.log('Элемент движется:', event.source);
});

draggable.on('drag:stop', (event) => {
  console.log('Перетаскивание завершено:', event.source);
});

draggable.on('sortable:stop', (event) => {
  console.log('Элемент был переставлен:', event.oldIndex, '→', event.newIndex);
});

События можно разделить на категории:

  • Drag-события: drag:start, drag:move, drag:stop.
  • Mirror-события: mirror:create, mirror:destroy, mirror:move.
  • Sortable-события: sortable:start, sortable:stop, sortable:sorted.
  • Droppable-события: droppable:over, droppable:out, droppable:dropped.

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

Продвинутая настройка mirror

Зеркальная копия (mirror) – это ключевой элемент UX при drag-and-drop. Настройки mirror позволяют полностью контролировать его поведение:

const draggable = new Draggable(document.querySelectorAll('.draggable-container'), {
  draggable: '.draggable-item',
  mirror: {
    constrainDimensions: false,
    xAxis: true,
    yAxis: true,
    appendTo: document.body,
  },
});

Важные опции mirror:

  • constrainDimensions – сохранять размеры оригинального элемента.
  • xAxis и yAxis – разрешают движение зеркала по осям.
  • appendTo – определяет, куда будет добавлен DOM-элемент mirror.

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

Настройка ограничения движения

Draggable поддерживает ограничение движения элементов через опцию handle и кастомные фильтры:

const draggable = new Draggable(document.querySelectorAll('.draggable-container'), {
  draggable: '.draggable-item',
  handle: '.drag-handle',
});
  • handle – CSS-селектор, по которому начинается перетаскивание. Остальная часть элемента становится неактивной для drag.

Можно также использовать функцию filter, чтобы исключать определённые элементы:

const draggable = new Draggable(document.querySelectorAll('.draggable-container'), {
  draggable: '.draggable-item',
  filter: '.no-drag',
});

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

Работа с множественными контейнерами

Draggable поддерживает несколько контейнеров для drag-and-drop между ними:

const containers = document.querySelectorAll('.draggable-container');
const draggable = new Draggable(containers, {
  draggable: '.draggable-item',
  plugins: [Sortable],
});

При этом события sortable:stop и sortable:sorted содержат информацию о старом и новом контейнерах (oldContainer, newContainer), что позволяет отслеживать перемещение элементов между различными зонами интерфейса.

Настройка автоскролла

Для длинных списков и прокручиваемых контейнеров Draggable предлагает расширенные настройки scrollable:

const draggable = new Draggable(document.querySelectorAll('.draggable-container'), {
  draggable: '.draggable-item',
  scrollable: {
    draggable: '.draggable-item',
    scrollableElements: ['.scrollable-container'],
    sensitivity: 50,
    speed: 10,
  },
});
  • scrollableElements – массив контейнеров, которые должны прокручиваться.
  • sensitivity – расстояние в пикселях от края, при котором начинается прокрутка.
  • speed – скорость прокрутки, позволяет регулировать динамику UX.

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

Итоговая структура конфигурации

Полная конфигурация Draggable может включать следующие ключевые разделы:

  • Основные опции: draggable, delay, handle, filter.
  • Mirror: управление визуальным представлением перетаскиваемого элемента.
  • Scrollable: автоматический скролл контейнеров.
  • Плагины: Sortable, Swappable, Droppable, Collidable.
  • События: drag, mirror, sortable, droppable, collidable.

Эта модульная архитектура делает библиотеку Shopify Draggable универсальным инструментом для создания любых drag-and-drop интерфейсов, от простых списков до сложных драг-н-дроп редакторов с множеством контейнеров и ограничений.

Оглавление