Базовая инициализация

Для работы с библиотекой Shopify Draggable необходимо сначала подключить её в проект. Существует несколько способов подключения: через npm, yarn или CDN.

Через npm:

npm install @shopify/draggable

Через yarn:

yarn add @shopify/draggable

После установки можно импортировать необходимые модули в Jav * aScript:

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

Если подключение через CDN, подключение выглядит так:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shopify/draggable/lib/draggable.bundle.css">
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable/lib/draggable.bundle.legacy.js"></script>

Инициализация Draggable

Основной класс для работы с элементами перетаскивания — это Draggable. Он принимает два аргумента: селектор контейнера и объект настроек.

Простейшая инициализация выглядит следующим образом:

const draggable = new Draggable(document.querySelectorAll('.draggable-container'), {
  draggable: '.draggable-item'
});
  • document.querySelectorAll(‘.draggable-container’) — выбирает контейнер(ы), элементы внутри которого будут перетаскиваться.
  • draggable: ‘.draggable-item’ — задаёт селектор перетаскиваемых элементов внутри контейнера.

Основные параметры конфигурации

Объект настроек Draggable поддерживает несколько ключевых параметров:

  • draggable — селектор элементов, которые можно перетаскивать.
  • handle — селектор элемента, по которому разрешено перетаскивание. Если не указан, перетаскивать можно за любой участок элемента.
  • delay — задержка начала перетаскивания в миллисекундах. Позволяет предотвращать случайные срабатывания при клике.
  • mirror — объект настройки зеркального отображения перетаскиваемого элемента. Например, mirror: { constrainDimensions: true } сохраняет размеры оригинального элемента.
  • plugins — массив подключаемых плагинов для расширения функционала, таких как Sortable или Swappable.

Пример расширенной инициализации с настройкой ручки и задержки:

const draggable = new Draggable(document.querySelectorAll('.draggable-container'), {
  draggable: '.draggable-item',
  handle: '.handle',
  delay: 150,
  mirror: {
    constrainDimensions: true
  }
});

Работа с событиями

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

  • drag:start — событие при начале перетаскивания.
  • drag:move — событие при перемещении элемента.
  • drag:stop — событие при завершении перетаскивания.
  • mirror:created — создаётся зеркальный элемент для визуализации перетаскивания.
  • mirror:destroy — уничтожение зеркального элемента после завершения перетаскивания.

Пример подписки на события:

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

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

Управление жизненным циклом Draggable

  • Создание экземпляра: new Draggable(...)
  • Отключение перетаскивания: draggable.disable() — временно блокирует возможность перетаскивания.
  • Включение перетаскивания: draggable.enable() — возвращает возможность перетаскивания.
  • Удаление экземпляра: draggable.destroy() — полностью очищает все слушатели и удаляет экземпляр.

Взаимодействие с DOM

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

<div class="draggable-container">
  <div class="draggable-item">
    <div class="handle">Перетащи меня</div>
    Элемент 1
  </div>
  <div class="draggable-item">
    <div class="handle">Перетащи меня</div>
    Элемент 2
  </div>
</div>

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

Настройка зеркального элемента

Зеркальный элемент (mirror) создаётся автоматически при начале перетаскивания. Он визуально повторяет перетаскиваемый элемент, оставаясь поверх других элементов.

Параметры mirror:

  • constrainDimensions — сохраняет размеры оригинального элемента.
  • xAxis / yAxis — ограничение движения по горизонтали или вертикали.

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

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

Это ограничит движение только по горизонтали.

Интеграция с плагинами

Shopify Draggable имеет встроенные плагины для расширения возможностей:

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

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

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

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

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

Практические рекомендации

  • Для большого количества элементов рекомендуется ограничивать область контейнера, чтобы улучшить производительность.
  • Использовать handle для сложных элементов, чтобы избежать случайного срабатывания перетаскивания.
  • Всегда удалять экземпляры через destroy(), если контейнер удаляется из DOM, чтобы избежать утечек памяти.
  • Использовать события drag:start и drag:stop для добавления визуальных эффектов, таких как подсветка активного элемента.

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

Оглавление