Требования к окружению

Для работы с библиотекой Shopify Draggable требуется корректная настройка окружения JavaScript. Библиотека распространяется в виде ES-модулей и UMD-бандлов, что позволяет использовать её как в современных сборщиках (Webpack, Rollup, Vite), так и через подключение скрипта в HTML.

Пример подключения через npm:

npm install @shopify/draggable

После установки доступно импортирование модулей:

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

Для UMD-бандла подключение через тег <script>:

<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.8/lib/draggable.bundle.js"></script>

Библиотека экспортирует глобальный объект Draggable при использовании через <script>.

Минимальные требования к браузеру

Shopify Draggable рассчитан на работу в современных браузерах с поддержкой ES6 и CSS-трансформаций. Ключевые возможности, необходимые для корректной работы:

  • ES6-синтаксис: class, let/const, стрелочные функции.
  • API Drag and Drop: библиотека использует нативные события pointerdown, pointermove, pointerup, с полифиллами для старых браузеров.
  • CSS трансформации: transform, translate3d для анимаций перетаскивания.
  • CustomEvent API: используется для генерации пользовательских событий библиотеки (drag:start, sortable:stop и т.д.).

Поддержка Internet Explorer 11 ограничена и требует дополнительных полифиллов.

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

Draggable совместим с популярными фронтенд-фреймворками, однако требуется корректная настройка модулей:

  • React / Preact: импорт компонентов через ES-модули, управление состоянием Drag/Drop через callbacks.
  • Vue 3: подключение через плагин или локальный компонент, использование слотов для элементов.
  • Angular: обертка в сервис и использование директив для элементов, подключение событий через EventEmitter.

В любом случае необходимо, чтобы сборщик поддерживал tree-shaking, иначе весь бандл Draggable попадет в итоговый файл.

Структура проекта

Для стабильной работы рекомендуется соблюсти следующую структуру:

project/
│
├─ src/
│  ├─ js/
│  │  └─ draggable-init.js
│  ├─ scss/
│  │  └─ draggable-styles.scss
│  └─ index.html
│
├─ dist/
│
├─ package.json
└─ webpack.config.js

Рекомендации:

  • JS-код, управляющий Draggable, держать в отдельном файле для удобства отладки.
  • Стили для визуальных эффектов перетаскивания (dragging, mirror, over) лучше хранить отдельно и импортировать в основной CSS/SCSS.
  • HTML-структура должна включать контейнеры и элементы, к которым будет применяться Draggable.

Требования к CSS

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

  • Стили контейнера: position: relative или position: absolute для элементов, которые будут перемещаться.
  • Mirror-элемент: Draggable создаёт копию перетаскиваемого элемента с классом .draggable-mirror, для которой нужно задать position: fixed, pointer-events: none, z-index: 9999.
  • Состояния элементов: .draggable-dragging для активного перетаскиваемого объекта, .draggable-over для элементов, над которыми находится курсор.

Пример базового CSS:

.draggable-dragging {
  opacity: 0.8;
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

.draggable-over {
  border: 2px dashed #007aff;
}

Полезные полифиллы и зависимости

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

  • core-js для ES6/ES7 функций.
  • @webcomponents/custom-elements при использовании веб-компонентов.
  • pointer-events-polyfill для корректной работы на старых устройствах с touch.

Эти зависимости обеспечивают стабильную работу событий Drag & Drop и пользовательских событий библиотеки в старых окружениях.

Настройка сборщика

Для сборки с использованием Webpack или Vite:

  • Обязательно указывать mode: 'development' или production.
  • Настроить babel-loader для транспиляции ES6.
  • Включить поддержку CSS/SCSS для импорта стилей Draggable.
  • Tree-shaking для уменьшения итогового размера бандла:
import { Draggable } from '@shopify/draggable';

Импорт отдельных модулей (Sortable, Swappable) помогает снизить нагрузку на финальный бандл.

Проверка окружения

Для проверки готовности окружения достаточно убедиться, что:

  1. Консоль браузера не выдает ошибок ES6.
  2. CSS трансформации применяются корректно.
  3. Элементы реагируют на события pointerdown, pointermove, pointerup.
  4. Импортируемые модули Draggable доступны и вызываются без ошибок.

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

Оглавление