Установка и подключение

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

Установка через npm

Наиболее рекомендуемый способ подключения Draggable — через пакетный менеджер npm. Это обеспечивает простую интеграцию с современными сборщиками, такими как Webpack, Parcel или Vite.

  1. Инициализация проекта (если ещё не создан):
npm init -y
  1. Установка библиотеки:
npm install @shopify/draggable --save

После установки пакет будет доступен в папке node_modules/@shopify/draggable, что позволяет импортировать его модули в JavaScript-файлы проекта.

Подключение модулей

Draggable поддерживает модульную структуру ES6, что позволяет импортировать только необходимые компоненты для оптимизации размера сборки. Основные модули:

  • Draggable — базовый класс для создания перетаскиваемых элементов.
  • Plugins — дополнительные возможности, такие как Sortable, Swappable, Droppable.

Пример импорта базового модуля:

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

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

Импорт с использованием плагина Sortable:

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

const sortable = new Sortable(document.querySelectorAll('.sortable-container'), {
  draggable: '.sortable-item'
});

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

Подключение через CDN

Если проект не использует сборщики и npm, Draggable можно подключить напрямую через CDN. Это удобный способ для быстрого прототипирования или простых страниц.

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

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

После подключения через CDN, классы доступны глобально:

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

Использование CDN позволяет сразу работать с готовым собранным файлом draggable.bundle.js, который включает все основные плагины и стили.

Настройка стилей

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

.draggable-item {
  user-select: none;
  cursor: grab;
}

.draggable-item.is-dragging {
  opacity: 0.8;
  cursor: grabbing;
}

Важно: класс is-dragging автоматически добавляется библиотекой при перетаскивании и позволяет визуально отслеживать активный элемент.

Инициализация и проверка

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

document.addEventListener('DOMContentLoaded', () => {
  const draggable = new Draggable(document.querySelectorAll('.draggable-container .draggable-item'), {
    draggable: '.draggable-item'
  });

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

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

Советы по организации подключения

  • ES6-модули рекомендуется использовать для современных проектов с системой сборки, так как это снижает размер итогового скрипта.
  • CDN подходит для статических сайтов и прототипов.
  • Всегда проверять совместимость версии Draggable с текущей версией браузеров и сборщиков.
  • Подключение стилей библиотеки обязательно, иначе визуальная индикация перетаскивания работать не будет.

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

Оглавление