Публичные методы

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

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

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

Экземпляр draggable хранит все публичные методы, через которые осуществляется управление поведением и состоянием компонентов.

Методы для управления жизненным циклом

1. destroy() Удаляет экземпляр Draggable, очищает слушатели событий и восстанавливает исходное состояние DOM.

draggable.destroy();

Особенности:

  • После вызова destroy() все события, назначенные на элементы, перестают работать.
  • Метод полезен для динамических интерфейсов, где элементы создаются и удаляются без перезагрузки страницы.

2. enable() и disable() Позволяют включать или отключать перетаскивание без разрушения экземпляра.

draggable.disable(); // Отключает перетаскивание
draggable.enable();  // Включает перетаскивание обратно
  • disable() блокирует взаимодействие с элементами, но сохраняет конфигурацию и слушатели.
  • enable() восстанавливает полный функционал, включая все подключенные плагины.

Методы для работы с DOM-элементами

1. getDraggableElements() Возвращает массив текущих элементов, доступных для перетаскивания.

const items = draggable.getDraggableElements();
console.log(items); // [HTMLElement, HTMLElement, ...]

Применение:

  • Позволяет динамически проверять, какие элементы участвуют в Draggable.
  • Используется для обновления состояния UI или интеграции с другими библиотеками.

2. getContainerElements() Возвращает массив контейнеров, в которых активны элементы Draggable.

const containers = draggable.getContainerElements();
console.log(containers);

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

Методы для взаимодействия с событиями

1. on(eventName, callback) Назначает обработчик события. Поддерживаются все события Draggable, включая пользовательские плагины.

draggable.on('drag:start', (event) => {
  console.log('Начало перетаскивания', event.source);
});
  • eventName — строка с названием события (drag:start, drag:move, drag:stop, sortable:sorted).
  • callback — функция, которая получает объект события с полезными свойствами: source, sensorEvent, mirror и др.

2. off(eventName, callback) Удаляет ранее назначенный обработчик.

draggable.off('drag:start', myCallback);

Используется для динамического контроля слушателей, особенно в SPA, где элементы перерисовываются.

Методы для расширенной работы с элементами

1. addContainer(container) Позволяет добавить новый контейнер к уже существующему экземпляру Draggable без пересоздания.

draggable.addContainer(document.querySelector('.new-container'));
  • Новый контейнер автоматически становится частью системы перетаскивания.
  • Метод полезен при динамическом рендеринге контента.

2. removeContainer(container) Удаляет контейнер из системы перетаскивания.

draggable.removeContainer(document.querySelector('.old-container'));
  • Перетаскивание элементов из удалённого контейнера прекращается.
  • Все события, связанные с этим контейнером, будут автоматически игнорироваться.

3. updateDraggableElements() Принудительно обновляет список элементов для перетаскивания после изменения DOM.

draggable.updateDraggableElements();
  • Метод критичен при динамическом добавлении или удалении элементов.
  • Без вызова updateDraggableElements() новые элементы не станут доступными для перетаскивания.

Методы для работы с зеркалами и позиционированием

1. getDraggableContainers() Возвращает объекты всех контейнеров с их текущими элементами и позициями, что важно для интеграции с плагинами сортировки.

2. getMirror() Возвращает текущий «зеркальный» элемент, который визуально перемещается во время drag-события.

const mirror = draggable.getMirror();
console.log(mirror); // HTMLElement
  • Зеркало создаётся автоматически при начале перетаскивания.
  • Позволяет кастомизировать стили, анимацию или добавлять эффекты без вмешательства в исходный DOM.

Методы для управления плагинами

Draggable поддерживает плагины, которые расширяют функционал (Sortable, SwapAnimation, ResizeMirror, и др.). Управление осуществляется через публичные методы:

1. addPlugin(plugin)

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

draggable.addPlugin(new Sortable());
  • Добавляет новый плагин к текущему экземпляру.
  • Все события плагина автоматически интегрируются с основным экземпляром.

2. removePlugin(pluginName)

draggable.removePlugin('Sortable');
  • Удаляет плагин по имени.
  • Прекращает работу всех событий и логики, связанной с этим плагином.

Итоговая структура публичных методов

Метод Назначение
destroy() Полное удаление экземпляра и очистка событий
enable() / disable() Включение/отключение перетаскивания
getDraggableElements() Получение элементов, доступных для перетаскивания
getContainerElements() Получение контейнеров с элементами
on(eventName, callback) Назначение слушателей событий
off(eventName, callback) Удаление слушателей событий
addContainer(container) Добавление нового контейнера
removeContainer(container) Удаление контейнера
updateDraggableElements() Обновление списка элементов
getMirror() Получение зеркального элемента
addPlugin(plugin) Добавление плагина
removePlugin(pluginName) Удаление плагина

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

Оглавление