Тактильный отклик

Dragula — это легковесная библиотека на JavaScript, предназначенная для реализации перетаскивания элементов между контейнерами. Она не требует использования фреймворков и предоставляет простой API для создания интерактивных интерфейсов с возможностью drag-and-drop. Основные возможности включают: перемещение элементов внутри одного контейнера, между разными контейнерами и контроль над допустимыми операциями перетаскивания.

import dragula from 'dragula';

const containers = [document.getElementById('container1'), document.getElementById('container2')];
const drake = dragula(containers);

В данном примере создаются два контейнера, между которыми возможен перенос элементов. drake — объект Dragula, через который настраиваются события и поведение.

Настройка поведения перетаскивания

Dragula позволяет детально управлять тем, какие элементы можно перетаскивать, и куда их можно помещать. Для этого используются следующие опции:

  • moves — функция, определяющая, разрешено ли перемещение конкретного элемента.
  • accepts — функция, проверяющая, можно ли вставить элемент в конкретный контейнер.
  • copy — определяет, будет ли элемент копироваться или перемещаться.
  • revertOnSpill — возвращает элемент в исходное положение, если он был сброшен вне контейнера.

Пример:

const drake = dragula(containers, {
    moves: function (el, source, handle, sibling) {
        return handle.classList.contains('handle');
    },
    accepts: function (el, target, source, sibling) {
        return target.id !== 'restricted';
    },
    copy: false,
    revertOnSpill: true
});

Здесь элемент можно перемещать только за специальную ручку с классом handle, и он не будет перемещен в контейнер с id restricted.

Работа с событиями

Dragula предоставляет богатый набор событий, которые позволяют реагировать на действия пользователя и реализовывать интерактивный отклик интерфейса.

Основные события:

  • drag — вызывается при начале перетаскивания элемента.
  • dragend — срабатывает при завершении перетаскивания.
  • drop — событие успешного перемещения элемента в контейнер.
  • over / out — срабатывают при наведении элемента на контейнер и уходе с него.
  • remove — вызывается при удалении элемента вне контейнера, если включена опция removeOnSpill.

Пример подписки на события:

drake.on('drag', function(el) {
    el.style.opacity = '0.5';
});

drake.on('drop', function(el, target, source, sibling) {
    el.style.opacity = '';
    console.log(`Элемент перемещен из ${source.id} в ${target.id}`);
});

drake.on('out', function(el, container, source) {
    el.classList.add('highlight');
});

drake.on('over', function(el, container, source) {
    el.classList.remove('highlight');
});

Тактильный отклик и визуальные эффекты

Тактильный отклик повышает удобство работы с интерфейсом. Dragula облегчает его реализацию через события и CSS:

  • Изменение стиля элемента при начале перетаскивания (drag) помогает пользователю понять, что элемент активен.
  • Использование классов для подсветки контейнеров при наведении (over/out) создаёт эффект, схожий с «магнитом», притягивающим элемент.
  • Анимация возвращения элементов (revertOnSpill) обеспечивает визуальный отклик при ошибочном перетаскивании.

Пример CSS для визуального отклика:

.gu-mirror {
    background-color: rgba(0, 150, 136, 0.3);
    border: 2px dashed #009688;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.highlight {
    border: 2px solid #ff5722;
}

.gu-mirror — это элемент, который Dragula создаёт как копию перетаскиваемого объекта для визуализации перемещения. Добавление теней и прозрачности усиливает ощущение объёма и движения.

Продвинутые сценарии

Dragula позволяет реализовать сложные сценарии:

  1. Динамическое создание контейнеров: контейнеры можно добавлять в DOM и подключать к уже существующему экземпляру Dragula.
const newContainer = document.createElement('div');
document.body.appendChild(newContainer);
drake.containers.push(newContainer);
  1. Контроль порядка элементов: через событие drop можно сохранять новое положение элементов и обновлять данные на сервере.
drake.on('drop', function(el, target, source) {
    const order = Array.from(target.children).map(child => child.dataset.id);
    fetch('/update-order', {
        method: 'POST',
        body: JSON.stringify(order),
        headers: {'Content-Type': 'application/json'}
    });
});
  1. Кастомные ограничения: можно запретить перенос некоторых элементов в определённые контейнеры в зависимости от состояния приложения или бизнес-логики.

Особенности интеграции

  • Dragula не требует jQuery.
  • Совместима с любыми современными браузерами.
  • Подходит для SPA и обычных страниц.
  • Возможна интеграция с React, Vue, Angular через прямой доступ к DOM, хотя библиотека работает вне виртуального DOM.

Оптимизация работы

  • Минимизировать количество операций в обработчиках событий drag и drop, чтобы избежать задержек при перетаскивании.
  • Использовать CSS-классы для визуальных эффектов вместо частой модификации inline-стилей.
  • Для больших списков элементов применять виртуализацию или ленивое рендеринг контейнеров.

Dragula сочетает простоту и гибкость, позволяя создавать интуитивно понятные интерфейсы с плавной анимацией и тактильным откликом. Правильная комбинация событий, стилей и логики обеспечивает высокое качество пользовательского опыта при любых сценариях drag-and-drop.

Оглавление