Классы и конструкторы

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

Создание экземпляра класса Draggable происходит через конструктор:

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

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

Параметры конструктора

  • containers – обязательный параметр, представляет собой DOM-элементы-контейнеры, в которых можно перетаскивать элементы. Может быть NodeList, массив DOM-элементов или одиночный элемент.

  • options – объект с настройками поведения:

    • draggable – селектор перетаскиваемого элемента внутри контейнера.

    • delay – задержка перед началом перетаскивания, в миллисекундах.

    • mirror – объект настроек зеркала (элемента, который перемещается по экрану):

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

    • plugins – массив подключаемых плагинов (например, Sortable, Swappable).

Экземпляр класса позволяет подключать обработчики событий через метод .on() и управлять поведением drag-and-drop без прямого вмешательства в DOM.

Методы и их применение

Класс Draggable предоставляет несколько ключевых методов:

.on(event, callback)

Используется для подписки на события жизненного цикла перетаскивания. События делятся на группы:

  • Drag events:

    • drag:start – начало перетаскивания.
    • drag:move – движение перетаскиваемого элемента.
    • drag:stop – завершение перетаскивания.

  • Mirror events:

    • mirror:create – создание зеркала.
    • mirror:destroy – удаление зеркала после завершения действия.

Пример использования:

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

draggable.on('drag:stop', (event) => {
  console.log('Элемент отпущен', event);
});

.destroy()

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

draggable.destroy();

.disable() и .enable()

Позволяют временно отключать или включать функциональность drag-and-drop:

draggable.disable();
draggable.enable();

Настройка поведения через конструктор

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

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

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

Дополнительно можно настроить ограничения перемещения:

const draggable = new Draggable(document.querySelectorAll('.grid'), {
  draggable: '.grid-item',
  mirror: { constrainDimensions: true },
  delay: 100,
  dragAxis: 'x' // ограничение движения по оси X
});

Наследование и расширение классов

Класс Draggable можно расширять через стандартный механизм ES6 extends. Это позволяет создавать кастомные версии с дополнительной логикой:

class CustomDraggable extends Draggable {
  constructor(containers, options) {
    super(containers, options);
  }

  highlight(item) {
    item.style.backgroundColor = 'yellow';
  }
}

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

custom.on('drag:start', (event) => {
  custom.highlight(event.source);
});

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

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

Экземпляр класса хранит ссылки на контейнеры и элементы, обеспечивая прямой доступ через свойства:

  • containers – массив контейнеров.
  • draggableElements – массив элементов, которые можно перемещать.
  • plugins – активные плагины экземпляра.

Каждое событие передает объект Event, содержащий полезные свойства:

  • source – исходный элемент, который перетаскивается.
  • mirror – копия элемента, перемещаемая по экрану.
  • sensorEvent – исходное событие мыши или касания.
  • originalEvent – оригинальное DOM-событие.

Практические рекомендации по использованию

  • Для больших списков рекомендуется использовать опцию delay, чтобы предотвратить случайное перетаскивание при клике.
  • Настройка mirror.constrainDimensions обеспечивает визуальную консистентность элементов.
  • Подключение плагинов через конструктор упрощает расширение функциональности без изменения исходного класса.
  • Наследование класса позволяет внедрять специфичные методы и улучшать UX для конкретного проекта.

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

Оглавление