Свойства экземпляров

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

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

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

Здесь первый аргумент конструктора указывает на элементы-контейнеры или коллекцию элементов, внутри которых будут находиться перетаскиваемые объекты. Параметр draggable определяет CSS-селектор самих элементов, которые можно перемещать.

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

Основные свойства экземпляра

  1. containers Массив DOM-элементов, которые были переданы конструктору. Используется для определения областей, внутри которых работают перетаскиваемые элементы.

    console.log(draggable.containers); // [div.draggable-container]

  2. draggables Список всех элементов, которые на текущий момент зарегистрированы как перетаскиваемые. Позволяет динамически проверять или модифицировать набор объектов.

    draggable.draggables.forEach(item => console.log(item));

  3. options Объект с конфигурацией текущего экземпляра. Содержит все настройки, переданные при создании, включая draggable, delay, mirror, handle, ignore.

    console.log(draggable.options.mirror.constrainDimensions); // true

  4. isDragging Булево свойство, показывающее, активен ли в данный момент процесс перетаскивания.

    if (draggable.isDragging) {
  console.log('Элемент сейчас перетаскивается');
}

  5. activeDraggable Содержит ссылку на элемент, который в данный момент перемещается. Если перетаскивания нет, свойство равно null.

    console.log(draggable.activeDraggable); // HTMLElement или null

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

    • element — DOM-элемент зеркала;
    • translate — объект с координатами { x, y };
    • style — доступ к стилям зеркала.
    console.log(draggable.mirror.translate.x);

Работа со свойствами для динамического управления

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

draggable.options.delay = 100; // добавление задержки перед началом перетаскивания
draggable.draggables.forEach(item => {
  item.style.cursor = 'grab';
});

Или проверка состояния перетаскивания перед выполнением действий:

if (draggable.isDragging && draggable.activeDraggable) {
  draggable.activeDraggable.style.opacity = '0.5';
}

Свойство mirror позволяет управлять визуальными эффектами:

draggable.on('drag:start', (event) => {
  draggable.mirror.element.style.backgroundColor = 'rgba(0,0,0,0.1)';
});

Полезные вспомогательные свойства

  • containers и draggables можно использовать для регистрации событий на отдельные элементы.
  • activeDraggable позволяет определить источник события drag:move.
  • mirror можно модифицировать динамически для создания кастомных эффектов перемещения.

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

Оглавление