Типы draggable объектов

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

Draggable

Draggable — это базовый класс, на котором строятся все остальные объекты. Он создаёт область, элементы которой можно перемещать с помощью мыши или касания. Основные свойства и методы:

  • container — DOM-элемент или селектор контейнера, в пределах которого будут перемещаться элементы.

  • draggable — селектор элементов внутри контейнера, которые становятся перетаскиваемыми.

  • Методы:

    • on(eventName, handler) — подписка на события, например drag:start, drag:move, drag:stop.
    • destroy() — отключение всех слушателей и очистка памяти.

Пример базового Draggable:

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

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

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

Sortable

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

  • Элементы автоматически меняют позиции при перетаскивании.
  • Поддержка mirror — визуального клона перемещаемого элемента.
  • Позволяет отслеживать изменения порядка с помощью события sortable:stop.

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

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

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

sortable.on('sortable:stop', (event) => {
  console.log('Новый порядок:', Array.from(event.container.children).map(el => el.textContent));
});

Swappable

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

  • Не требует перестановки всех элементов, достаточно поменять позиции двух элементов.

  • События:

    • swappable:start — начало перетаскивания.
    • swappable:swapped — элементы успешно обменялись местами.

Пример Swappable:

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

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

swappable.on('swappable:swapped', (event) => {
  console.log('Элементы обменялись местами:', event.source, event.over);
});

Droppable

Droppable предоставляет механизм приёма элементов в специальные зоны, без изменения порядка остальных элементов. Полезен для реализации корзин, списков задач и подобных интерфейсов. Основные особенности:

  • droppable — селектор зон, куда можно бросать элементы.

  • События:

    • droppable:over — элемент наведен на зону.
    • droppable:out — элемент покинул зону.
    • droppable:dropped — элемент сброшен в зону.

Пример Droppable:

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

const droppable = new Droppable(document.querySelectorAll('.dropzones'), {
  draggable: '.item',
  droppable: '.zone'
});

droppable.on('droppable:dropped', (event) => {
  console.log('Элемент помещён в зону:', event.source, event.over);
});

Mirror

Mirror — вспомогательный объект, создающий визуальный клон перетаскиваемого элемента. Он используется внутри Sortable и Draggable для улучшения UX. Ключевые особенности:

  • mirror создаётся автоматически при перетаскивании.
  • Не изменяет структуру DOM исходного элемента.
  • Позволяет настроить стиль, размеры и позиционирование клона.

Пример кастомного Mirror:

draggable.on('mirror:created', (event) => {
  event.mirror.style.backgroundColor = 'rgba(0, 0, 255, 0.2)';
});

Отличия и выбор типа

Тип Основное назначение Изменение DOM Поддержка нескольких контейнеров
Draggable Базовое перетаскивание Нет Да
Sortable Перестановка элементов Да Да
Swappable Обмен местами элементов Да (локально) Да
Droppable Приём элементов в зоны Нет Да
Mirror Визуальный клон элемента Нет Да

Использование правильного типа draggable объекта зависит от цели: сортировка и перестановка — Sortable, обмен элементами — Swappable, приём в зоны — Droppable, простое перетаскивание без изменения DOM — Draggable. Mirror обеспечивает визуальную отзывчивость и улучшает UX при всех типах взаимодействий.

Настройка и кастомизация

Каждый тип draggable объекта поддерживает опции конфигурации:

  • delay — задержка начала перетаскивания.
  • mirror — параметры визуального клона.
  • handle — только элементы внутри которых могут инициировать drag.
  • classes — пользовательские CSS-классы для состояния dragging, mirror и over.

Пример с кастомной настройкой Sortable:

const sortable = new Sortable(document.querySelectorAll('.list'), {
  draggable: '.item',
  handle: '.handle',
  mirror: {
    constrainDimensions: true
  },
  classes: {
    dragging: 'is-dragging',
    mirror: 'mirror-element'
  }
});

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

Оглавление