Подключение плагинов

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

Установка и инициализация плагинов

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

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

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

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

Ключевые моменты:

plugins — массив, содержащий классы плагинов, которые нужно активировать.
Порядок плагинов может быть важен, если один плагин зависит от событий другого.
Необязательно использовать все плагины одновременно; можно подключать только те, которые требуются.

Основные плагины и их назначение

Sortable
- Позволяет сортировать элементы внутри контейнера или между несколькими контейнерами.
- Автоматически управляет позиционированием элементов при перетаскивании.
- Пример использования:
```
const sortableDraggable = new Draggable(document.querySelectorAll('.list'), {
  draggable: '.list-item',
  plugins: [Plugins.Sortable]
});
```

Mirror

Создаёт визуальную копию элемента во время перетаскивания.
Позволяет задать класс для зеркала и его поведение.

const mirrorDraggable = new Draggable(document.querySelectorAll('.cards'), {
  draggable: '.card',
  plugins: [Plugins.Mirror],
  mirror: {
    constrainDimensions: true,
    xAxis: true,
    yAxis: true
  }
});

ResizeMirror
- Расширение плагина Mirror, которое синхронизирует размеры зеркала с исходным элементом.
- Особенно полезно для адаптивных интерфейсов, где размеры элементов могут изменяться динамически.
SwapAnimation
- Добавляет плавную анимацию при перемещении элементов.
- Работает в связке с плагином Sortable для улучшения визуального восприятия.
```
const animatedDraggable = new Draggable(document.querySelectorAll('.grid'), {
  draggable: '.grid-item',
  plugins: [Plugins.Sortable, Plugins.SwapAnimation]
});
```

Настройка плагинов

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

Mirror
- mirror.appendTo: контейнер, в который будет добавлено зеркало (document.body по умолчанию).
- mirror.constrainDimensions: сохранять размеры оригинала.
- mirror.xAxis / mirror.yAxis: разрешение движения по осям.
Sortable
- sortable.swapAnimation: включение/отключение анимации.
- sortable.draggableClass: класс, который будет применяться к активному элементу.
SwapAnimation
- duration: длительность анимации в миллисекундах.
- easingFunction: функция сглаживания движения.

Подключение нескольких плагинов одновременно

Библиотека поддерживает одновременное использование нескольких плагинов. Это позволяет, например, создавать интерактивные списки с сортировкой, зеркалами и плавной анимацией одновременно.

const complexDraggable = new Draggable(document.querySelectorAll('.complex-list'), {
  draggable: '.complex-item',
  plugins: [Plugins.Sortable, Plugins.Mirror, Plugins.SwapAnimation],
  mirror: {
    constrainDimensions: true
  },
  swapAnimation: {
    duration: 200,
    easingFunction: 'ease-in-out'
  }
});

Особенности работы нескольких плагинов:

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

Подключение пользовательских плагинов

Draggable позволяет создавать собственные плагины, расширяя базовые события:

class MyPlugin {
  constructor(draggable) {
    this.draggable = draggable;
  }
  
  attach() {
    this.draggable.on('drag:start', this.onDragStart.bind(this));
  }
  
  onDragStart(event) {
    console.log('Начало перетаскивания:', event);
  }
}

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

Важно:

Метод attach() вызывается автоматически при инициализации.
Пользовательский плагин может подписываться на все события Draggable (drag:start, drag:move, drag:stop) и изменять поведение элементов.
Плагины могут использовать внутренние методы Draggable для управления зеркалами и сортировкой.

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

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

<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.8/lib/draggable.bundle.js"></script>
<script>
  const draggable = new Draggable(document.querySelectorAll('.items'), {
    draggable: '.item',
    plugins: [Draggable.Plugins.Sortable, Draggable.Plugins.Mirror]
  });
</script>

В этом случае плагины доступны через пространство имен Draggable.Plugins.
Настройки и порядок подключения идентичны модульному подходу через npm.