Определение draggable источников

В библиотеке Shopify Draggable ключевым элементом является источник перетаскивания (draggable source) — элемент DOM, с которого начинается взаимодействие перетаскивания. Корректная конфигурация таких источников позволяет реализовать точный и отзывчивый пользовательский интерфейс с минимальными усилиями.

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

Draggable работает с CSS-селекторами, передаваемыми при инициализации. Основной способ указания источников перетаскивания — это передача селектора элементов, которые будут интерактивными.

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

const container = document.querySelector('.container');
const draggable = new Draggable(container, {
  draggable: '.item'
});
  • container — родительский элемент, который будет отслеживать события перетаскивания.
  • draggable — селектор элементов внутри контейнера, которые будут выступать источниками перетаскивания.

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

Поддержка динамически добавляемых элементов

Если элементы добавляются динамически после инициализации Draggable, стандартная конфигурация не обнаруживает новые элементы. Для работы с динамическими источниками перетаскивания используют повторную инициализацию или observe API.

draggable.destroy(); // Удаляем предыдущую инициализацию
draggable = new Draggable(container, {
  draggable: '.item'
});

Либо можно использовать MutationObserver, чтобы отслеживать добавление элементов и обновлять Draggable без полного разрушения:

const observer = new MutationObserver(() => {
  draggable.destroy();
  draggable = new Draggable(container, { draggable: '.item' });
});

observer.observe(container, { childList: true, subtree: true });

Ограничение области перетаскивания

Draggable позволяет ограничивать источник перетаскивания определённой областью с помощью свойства handle:

const draggable = new Draggable(container, {
  draggable: '.item',
  handle: '.handle'
});
  • handle — дочерний элемент источника, по которому фактически начинается перетаскивание.
  • Элементы без handle не будут реагировать на попытки перетаскивания, что полезно для сложных UI, где часть элемента интерактивна, а часть — нет.

Фильтрация элементов

Можно исключать элементы из источников перетаскивания с помощью свойства exclude:

const draggable = new Draggable(container, {
  draggable: '.item',
  exclude: ['.disabled', '[data-static]']
});
  • exclude принимает массив CSS-селекторов.
  • Исключённые элементы игнорируются, даже если они соответствуют селектору draggable.

События источников перетаскивания

Draggable предоставляет полный набор событий для контроля источников перетаскивания:

  • drag:start — срабатывает при начале перетаскивания источника.
  • drag:move — отслеживает движение элемента.
  • drag:stop — завершается перетаскивание.
  • drag:over и drag:out — при взаимодействии с контейнерами-приёмниками.

Пример отслеживания начала перетаскивания:

draggable.on('drag:start', (event) => {
  console.log('Перетаскивание начато', event.source);
});
  • event.source возвращает DOM-элемент источника.
  • Это позволяет модифицировать стиль или свойства элемента в момент захвата.

Вложенные draggable источники

Draggable поддерживает вложенные источники перетаскивания. Для этого нужно корректно указать контейнеры и селекторы:

const nestedDraggable = new Draggable(document.querySelectorAll('.nested-container'), {
  draggable: '.nested-item'
});
  • Каждый контейнер отслеживает свои источники.
  • Важно помнить о приоритете событий: вложенные контейнеры могут перехватывать события родительских элементов.

Производительность и оптимизация

  • Использование селекторов вместо прямых DOM-элементов снижает нагрузку на память.
  • Ограничение handle уменьшает количество срабатываний лишних событий.
  • Динамическое обновление через MutationObserver позволяет поддерживать актуальные источники без полной перезагрузки Draggable.

Вывод

Определение источников перетаскивания — фундаментальная часть работы с библиотекой Shopify Draggable. Правильное использование селекторов draggable, ограничений через handle, фильтрации exclude и обработчиков событий обеспечивает гибкое и отзывчивое управление элементами DOM, а также повышает производительность интерфейса.

Оглавление