Определение draggable элементов

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

Выбор элементов для перетаскивания

Для создания draggable необходимо указать DOM-элементы, которые будут участвовать в перетаскивании. Обычно это делается с помощью CSS-селекторов:

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

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

В данном примере все элементы с классом draggable-item становятся доступными для перетаскивания. Важно различать контейнер, в котором находятся элементы, и сами элементы. Контейнер обеспечивает область перетаскивания, а селектор draggable указывает непосредственно на объекты, которые будут перемещаться.

Настройка опций draggable

Shopify Draggable предоставляет гибкие настройки для определения поведения draggable элементов:

  • draggable — CSS-селектор элементов, которые можно перетаскивать.
  • handle — позволяет ограничить область захвата элемента, если перетаскивание должно срабатывать только при взаимодействии с определенной частью элемента.
  • mirror — создание копии элемента (mirror element) во время перетаскивания для улучшения UX.
  • delay — задержка перед началом перетаскивания, предотвращает случайные перемещения при клике.

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

const draggable = new Draggable(document.querySelectorAll('.draggable-container'), {
  draggable: '.draggable-item',
  handle: '.drag-handle',
  mirror: {
    constrainDimensions: true
  }
});

Здесь перетаскивание будет происходить только при захвате области с классом .drag-handle, а во время перетаскивания будет создаваться зеркальная копия элемента с сохранением размеров оригинала.

Различие между draggable и sortable элементами

В Shopify Draggable различают draggable и sortable:

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

Для sortable необходимо использовать расширение Sortable:

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

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

Sortable наследует все свойства draggable, но добавляет логику перестановки элементов и событие sortable:stop для отслеживания изменений позиции.

Mirror элементы и их свойства

Mirror элемент создается автоматически библиотекой и представляет визуальную копию перемещаемого объекта. Основные свойства mirror:

  • constrainDimensions — копия сохраняет размеры оригинального элемента.
  • xOffset и yOffset — смещение зеркала относительно курсора.
  • appendTo — определяет, куда добавляется mirror элемент в DOM.

Пример кастомизации mirror:

const draggable = new Draggable(document.querySelectorAll('.draggable-container'), {
  draggable: '.draggable-item',
  mirror: {
    constrainDimensions: true,
    appendTo: document.body,
    xOffset: 10,
    yOffset: 10
  }
});

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

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

  • drag:start — срабатывает при начале перетаскивания.
  • drag:move — срабатывает при каждом движении элемента.
  • drag:stop — срабатывает после окончания перетаскивания.
  • mirror:created — событие создания зеркального элемента.
  • mirror:destroy — событие удаления зеркала.

Пример подписки на события:

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

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

Итоговая структура draggable элемента

Элемент, готовый к перетаскиванию, обладает следующими характеристиками:

  1. Находится в контейнере, поддерживающем drag-and-drop.
  2. Идентифицируется через селектор draggable.
  3. Может иметь ограничение области захвата (handle).
  4. При необходимости создается mirror элемент.
  5. Поддерживает подписку на события жизненного цикла перетаскивания.

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

Оглавление