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

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

Основной синтаксис конструктора

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

const draggable = new Draggable(containerSelector, {
  draggable: '.item',
  delay: 0,
  mirror: {
    constrainDimensions: false,
    appendTo: document.body,
    xAxis: true,
    yAxis: true
  },
  plugins: []
});

В этом примере containerSelector определяет родительский элемент, содержащий элементы, которые будут перетаскиваться. Ключевой объект настроек управляет поведением Draggable.

draggable

Тип: string | NodeList | Array<Element> Описание: Селектор элементов, которые будут перетаскиваться. Может быть CSS-селектором, массивом DOM-элементов или NodeList.

Примеры:

draggable: '.card'
draggable: document.querySelectorAll('.card')
draggable: [document.getElementById('item1'), document.getElementById('item2')]

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

delay

Тип: number Описание: Задержка в миллисекундах перед началом перетаскивания после нажатия на элемент.

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

delay: 100 // перетаскивание начнётся через 100 мс

Используется для предотвращения случайного перетаскивания при клике или коротком касании на сенсорных устройствах.

mirror

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

  • constrainDimensions — boolean Если true, зеркальный элемент сохраняет размеры оригинала, если false, размеры можно изменять через CSS.

  • appendTo — Element Элемент DOM, в который будет добавлен зеркальный элемент. Обычно это document.body, чтобы зеркало не зависело от overflow родителя.

  • xAxis и yAxis — boolean Управляют осями перемещения зеркального элемента. Можно заблокировать движение по одной из осей.

Пример:

mirror: {
  constrainDimensions: true,
  appendTo: document.body,
  xAxis: true,
  yAxis: false // движение только по X
}

plugins

Тип: Array Описание: Список подключаемых плагинов, расширяющих функциональность Draggable.

Примеры популярных плагинов:

  • SwapAnimation — анимация перестановки элементов
  • Sortable — создание сортируемых списков
  • Collidable — обработка столкновений с другими элементами

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

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

const draggable = new Draggable(containerSelector, {
  draggable: '.item',
  plugins: [Sortable, SwapAnimation]
});

Каждый плагин может принимать собственные настройки, которые передаются внутрь объекта конфигурации Draggable.

handle

Тип: string Описание: Селектор дочернего элемента, через который разрешено перетаскивание. Полезно, если перетаскивать элемент можно только за определённую область, например, за заголовок карточки.

Пример:

handle: '.drag-handle'

ignore

Тип: string Описание: Селектор элементов, на которых перетаскивание запрещено. Например, кнопки внутри карточек, по которым не нужно инициировать перетаскивание.

Пример:

ignore: 'input, button'

draggable + handle + ignore в связке

Комбинация этих параметров позволяет тонко контролировать взаимодействие пользователя:

const draggable = new Draggable('.list', {
  draggable: '.item',
  handle: '.handle',
  ignore: 'input, button',
  delay: 150
});
  • Только элементы .item будут перетаскиваться
  • Перетаскивание доступно только через .handle
  • Любые клики по input или button не инициируют перетаскивание
  • Перетаскивание начинается через 150 мс

Дополнительные параметры

  • distance — минимальное расстояние в пикселях, которое необходимо пройти курсору до начала перетаскивания. Позволяет различать клик и drag.
  • scroller — объект, управляющий автоматической прокруткой контейнера при перемещении элементов к краям.
  • dropzone — селектор элементов, на которые можно сбрасывать перетаскиваемые объекты. Используется вместе с плагином Droppable.

Пример с distance и dropzone:

const draggable = new Draggable('.container', {
  draggable: '.card',
  distance: 10,
  dropzone: '.drop-area'
});

Итоговая структура объекта параметров

{
  draggable: '.item',
  handle: '.handle',
  ignore: 'input, button',
  delay: 100,
  distance: 5,
  mirror: {
    constrainDimensions: true,
    appendTo: document.body,
    xAxis: true,
    yAxis: true
  },
  plugins: [Sortable, SwapAnimation],
  dropzone: '.drop-area',
  scroller: {
    speed: 5,
    sensitivity: 30
  }
}

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

Оглавление