drake.dragging - проверка активности

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

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

let drake = dragula([container1, container2]);
console.log(drake.dragging); // false, пока элемент не перетаскивается

Поведение свойства dragging

  • false — никаких элементов не перетаскивается, dragula находится в состоянии ожидания.
  • true — элемент активно перетаскивается пользователем, мышь удерживает элемент, и dragula отслеживает его положение.

Флаг dragging автоматически меняется библиотекой при начале и окончании перетаскивания. Это означает, что прямое вмешательство в него не требуется, однако его чтение позволяет реализовать условную логику, основанную на активности drag-and-drop.

Использование dragging в событиях

Dragula предоставляет ряд событий, которые синхронизируются с изменением флага dragging:

  • drag — срабатывает в момент начала перетаскивания. В этот момент drake.dragging становится true.
  • drop — фиксирует завершение перемещения элемента. После этого drake.dragging возвращается в false.
  • cancel — отмена перетаскивания также устанавливает dragging в false.
  • shadow — создание визуального “призрачного” элемента не влияет на dragging, он по-прежнему указывает активность основного перетаскиваемого элемента.

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

drake.on('drag', function(el) {
    if (drake.dragging) {
        console.log('Начало перетаскивания элемента:', el);
    }
});

drake.on('drop', function(el, target) {
    if (!drake.dragging) {
        console.log('Элемент сброшен в контейнер:', target);
    }
});

Проверка состояния вне событий

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

function checkDragStatus() {
    if (drake.dragging) {
        console.log('Перетаскивание в процессе...');
    } else {
        console.log('Перетаскивания нет.');
    }
}

// Проверка каждые 200 мс
setInterval(checkDragStatus, 200);

Комбинация с другими методами Dragula

dragging хорошо сочетается с другими методами и свойствами drake:

  • drake.start(el) — принудительно начинает перетаскивание элемента. После вызова dragging становится true.
  • drake.end() — завершает активное перетаскивание. Флаг автоматически сбрасывается.
  • drake.cancel(true) — отменяет текущее перетаскивание и возвращает элемент в исходное положение. dragging после этого false.
  • drake.containers — список контейнеров. Можно использовать dragging в сочетании с проверкой, в каком контейнере находится элемент в момент перетаскивания.

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

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

  2. Анимация и визуальная обратная связь В моменты, когда dragging true, можно менять стили контейнеров или добавлять эффект тени на перетаскиваемый элемент.

  3. Интеграция с сетевыми операциями Проверка dragging перед отправкой данных на сервер позволяет избежать конфликтов между перетаскиванием и асинхронными обновлениями.

  4. Защита от одновременных операций Если несколько элементов могут быть перетаскиваемыми, проверка dragging гарантирует, что не начнётся новая операция, пока не завершена текущая.

Советы по использованию

  • Не полагаться на внешние таймеры для управления drag-and-drop; лучше использовать события drag, drop и cancel.
  • Не изменять drake.dragging вручную — это внутренний флаг библиотеки.
  • Для сложных интерфейсов удобно комбинировать dragging с пользовательскими классами CSS для визуального выделения активного состояния.

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

Оглавление