Статические методы

Библиотека Shopify Draggable предоставляет мощный API для создания интерактивных перетаскиваемых элементов на странице. Помимо создания экземпляров объектов для конкретных контейнеров, библиотека включает ряд статических методов, которые позволяют управлять поведением элементов и расширять функциональность без необходимости создавать новый объект Draggable.

Draggable.create()

Статический метод Draggable.create() используется для быстрого создания экземпляра Draggable на одном или нескольких контейнерах. Синтаксис:

Draggable.create(containers, options);

  • containers — CSS-селектор, DOM-элемент или массив элементов, к которым нужно применить Draggable.

  • options — объект с настройками:

    • draggable — селектор перетаскиваемых элементов внутри контейнера.
    • handle — селектор области, по которой разрешено перетаскивание.
    • mirror — логика создания зеркала перетаскиваемого элемента.
    • delay — задержка перед началом перетаскивания.

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

Draggable.create('.list', {
  draggable: '.item',
  handle: '.handle',
  mirror: {
    constrainDimensions: true
  }
});

Здесь метод сразу создаёт Draggable для всех контейнеров с классом .list, позволяя перетаскивать элементы .item только через область .handle.

Draggable.isDragging

Статическое свойство Draggable.isDragging возвращает булево значение, показывающее, выполняется ли в данный момент перетаскивание любого элемента на странице.

if (Draggable.isDragging) {
  console.log('Процесс перетаскивания активен');
}

Это полезно для контроля поведения интерфейса при активном перетаскивании, например, отключения кликов по кнопкам или навигации.

Draggable.utils

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

  • Draggable.utils.closest(element, selector) — возвращает ближайший родительский элемент, соответствующий селектору.
  • Draggable.utils.clone(target) — клонирует DOM-элемент для создания зеркала.
  • Draggable.utils.isTouchEvent(event) — проверяет, является ли событие сенсорным.
  • Draggable.utils.cancelEvent(event) — предотвращает стандартное поведение браузера.

Пример:

const parent = Draggable.utils.closest(clickedElement, '.container');
const clone = Draggable.utils.clone(parent);

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

Draggable.snap

Статический метод Draggable.snap используется для привязки позиции перетаскиваемого элемента к определённой сетке или значениям. Он возвращает функцию, которая применяется к координатам элемента при событии drag:move.

Draggable.snap(value, grid);
  • value — координата (x или y) элемента.
  • grid — шаг сетки (например, 50px).

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

const snapToGrid = Draggable.snap(0, 50);

Draggable.create('.grid-item', {
  draggable: '.item',
  onDragMove({mirror}) {
    mirror.style.transform = `translate(${snapToGrid(mirror.offsetLeft)}px, ${snapToGrid(mirror.offsetTop)}px)`;
  }
});

В результате элемент будет “прилипать” к сетке с шагом 50 пикселей.

Draggable.get()

Метод Draggable.get(element) позволяет получить существующий экземпляр Draggable, связанный с указанным контейнером. Возвращает объект Draggable или null, если экземпляр не найден.

const draggableInstance = Draggable.get(document.querySelector('.list'));
draggableInstance.on('drag:start', event => {
  console.log('Перетаскивание началось');
});

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

Draggable.destroyAll()

Статический метод Draggable.destroyAll() удаляет все существующие экземпляры Draggable с страницы, освобождая ресурсы и отключая все обработчики событий.

Draggable.destroyAll();

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

Резюме по статическим методам

  • Draggable.create() — создание новых экземпляров без явного new.
  • Draggable.isDragging — глобальная проверка активности перетаскивания.
  • Draggable.utils — набор вспомогательных функций для работы с DOM и событиями.
  • Draggable.snap() — привязка координат к сетке или определённым значениям.
  • Draggable.get() — получение существующего экземпляра по контейнеру.
  • Draggable.destroyAll() — удаление всех Draggable с страницы.

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

Оглавление