Настройка через data-атрибуты

Библиотека Shopify Draggable предоставляет мощный инструмент для создания перетаскиваемых элементов на веб-странице. Одним из способов управления поведением Draggable является настройка через HTML data-атрибуты, что позволяет отделить логику инициализации от JavaScript и облегчает масштабирование интерфейса.

Основные data-атрибуты

  1. data-draggable Этот атрибут указывает, что элемент должен быть интерактивным. Он применяется к контейнеру, содержащему элементы для перетаскивания. Пример:

    <ul data-draggable="true">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

    Значение "true" позволяет автоматически определить, что внутри контейнера находятся перетаскиваемые элементы.

  2. data-draggable-handle Позволяет указать область перетаскивания внутри элемента. Это особенно полезно, когда элемент содержит интерактивные элементы (кнопки, ссылки), которые не должны инициировать drag.

    <li data-draggable-handle=".handle">
  <span class="handle">Перетащить</span>
  Контент элемента
</li>

    В этом примере перетаскивание активируется только при взаимодействии с элементом с классом .handle.

  3. data-draggable-group Позволяет объединять элементы в группы для ограниченного взаимодействия между ними. Элементы из разных групп не будут взаимодействовать друг с другом при drag-and-drop.

    <ul data-draggable-group="products">
  <li>Товар 1</li>
  <li>Товар 2</li>
</ul>
<ul data-draggable-group="categories">
  <li>Категория A</li>
  <li>Категория B</li>
</ul>

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

Настройка ограничений

data-draggable-constraints позволяет задать ограничения для перемещения элементов. Например, можно ограничить перемещение по оси X или Y.

<li data-draggable-constraints="x">
  Элемент, который можно перетаскивать только по горизонтали
</li>
<li data-draggable-constraints="y">
  Элемент, который можно перетаскивать только по вертикали
</li>

Поддерживаются значения:

  • x — только горизонтальное перемещение
  • y — только вертикальное перемещение
  • null — перемещение по обеим осям (значение по умолчанию)

Инициализация через JavaScript

Даже при использовании data-атрибутов, для активации Draggable требуется инициализация через JavaScript. Однако атрибуты позволяют автоматически подхватывать конфигурацию.

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

const containers = document.querySelectorAll('[data-draggable="true"]');

containers.forEach(container => {
  const draggable = new Draggable(container, {
    draggable: 'li',
    handle: container.querySelector('[data-draggable-handle]')?.className || null,
    mirror: {
      constrainDimensions: true
    }
  });

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

В этом примере:

  • draggable — селектор элементов внутри контейнера, которые можно перетаскивать
  • handle — определяет, какая область внутри элемента активирует drag
  • mirror — создаёт визуальную копию элемента при перетаскивании

Применение групп и ограничений

Использование data-атрибутов для группировки и ограничения перемещения упрощает работу с большими списками:

<ul data-draggable="true" data-draggable-group="tasks">
  <li data-draggable-constraints="y">Задача 1</li>
  <li data-draggable-constraints="y">Задача 2</li>
</ul>
<ul data-draggable="true" data-draggable-group="tasks">
  <li data-draggable-constraints="y">Задача 3</li>
</ul>

JavaScript автоматически связывает элементы одной группы, а ограничения осей позволяют создавать вертикальные списки с drag-and-drop, исключая случайные смещения по горизонтали.

Комбинирование атрибутов

Data-атрибуты можно комбинировать, создавая гибкие интерфейсы без постоянного редактирования JS-кода. Пример сложного элемента:

<ul data-draggable="true" data-draggable-group="products">
  <li data-draggable-handle=".handle" data-draggable-constraints="x">
    <span class="handle">≡</span> Продукт 1
  </li>
  <li data-draggable-handle=".handle" data-draggable-constraints="x">
    <span class="handle">≡</span> Продукт 2
  </li>
</ul>

Здесь элементы перетаскиваются только по горизонтали, а drag активируется только при взаимодействии с .handle.

Динамическая модификация атрибутов

Data-атрибуты можно менять в рантайме, и Draggable будет учитывать обновления при следующей инициализации или при повторной активации контейнера:

const firstItem = document.querySelector('li');
firstItem.setAttribute('data-draggable-constraints', 'y');

После этого элемент можно будет перемещать только по вертикали без изменения JS-инициализации.

Практические советы

  • Использовать data-атрибуты для простых и повторяющихся конфигураций удобнее, чем хранить их в массиве настроек в JavaScript.
  • Для сложных динамических сценариев лучше комбинировать атрибуты с программным управлением Draggable через события (drag:start, drag:stop, sortable:stop).
  • Атрибуты удобно документировать прямо в HTML, что облегчает работу командой разработчиков и поддержку кода.

Data-атрибуты обеспечивают чистую и декларативную настройку Draggable, минимизируют дублирование кода и делают интерфейсы более предсказуемыми при масштабировании.

Оглавление