Работа с data-атрибутами

Dragula — это легковесная библиотека для реализации перетаскивания элементов на веб-странице. Одним из удобных инструментов взаимодействия с элементами в Dragula является использование HTML data-атрибутов. Data-атрибуты позволяют хранить произвольные данные прямо в разметке, которые затем можно считывать и использовать в логике работы Dragula, например, для фильтрации элементов, задания правил перетаскивания или передачи метаданных.

Объявление и использование data-атрибутов

Data-атрибут задается в HTML через синтаксис data-имя="значение". В Dragula это позволяет делать проверку или настраивать поведение контейнеров и элементов. Например:

<div id="container">
    <div data-draggable="true" data-type="card">Карточка 1</div>
    <div data-draggable="false" data-type="card">Карточка 2</div>
    <div data-draggable="true" data-type="widget">Виджет 1</div>
</div>

В этом примере у каждого элемента есть атрибут data-draggable, который указывает, можно ли его перемещать, и data-type, который обозначает тип элемента.

Фильтрация элементов по data-атрибутам

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

const container = document.getElementById('container');

const drake = dragula([container], {
    moves: function (el) {
        return el.dataset.draggable === "true";
    }
});

В этом примере Dragula будет позволять перетаскивать только элементы с data-draggable="true". dataset — это объект, автоматически создаваемый браузером для всех атрибутов, начинающихся с data-.

Использование data-атрибутов для различия типов элементов

Data-атрибуты можно применять для создания правил перетаскивания между различными категориями элементов. Например, чтобы перемещать только карточки внутри определенного контейнера, можно использовать атрибут data-type:

const drake = dragula([container], {
    accepts: function (el, target) {
        return el.dataset.type === "card" && target.id === "container";
    }
});

Функция accepts проверяет каждый элемент перед вставкой в новый контейнер. Использование dataset.type позволяет гибко управлять правилами перемещения в зависимости от типа элемента.

Передача дополнительных данных через data-атрибуты

Data-атрибуты можно использовать не только для фильтрации, но и для передачи информации о перетаскиваемых элементах в события Dragula. Например, при событии drop можно считывать дополнительные свойства:

drake.on('drop', function (el, target, source, sibling) {
    console.log('Элемент:', el.textContent);
    console.log('Тип:', el.dataset.type);
});

Это позволяет интегрировать Dragula с системой хранения данных или внешним API, используя значения из атрибутов без необходимости обращаться к другим структурам данных.

Динамическое изменение data-атрибутов

Data-атрибуты могут быть изменены во время работы скрипта для управления поведением элементов в Dragula. Например, чтобы временно запретить перетаскивание элемента:

const element = document.querySelector('[data-type="card"]');
element.dataset.draggable = "false";

После этого Dragula автоматически перестанет позволять перетаскивание этого элемента, если используется проверка через moves.

Особенности взаимодействия с dataset

  1. Все data-атрибуты автоматически конвертируются в свойства объекта dataset с именами в camelCase. Пример: data-user-id → dataset.userId.

  2. Значения всегда возвращаются как строки. Для использования логических значений необходимо проводить явное приведение:

    const isDraggable = el.dataset.draggable === "true";

  3. Data-атрибуты можно использовать для хранения идентификаторов, типов, статусов и других параметров, что делает Dragula более гибким без дополнительной структуры данных.

Практическое применение

  • Разделение элементов на типы и контейнеры.
  • Ограничение перемещения определенных элементов.
  • Передача метаданных при событиях drop и drag.
  • Динамическое управление поведением интерфейса через изменение атрибутов.

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

Оглавление