Обработка ошибок пользователя

Dragula — это библиотека для реализации drag-and-drop функционала в веб-приложениях на JavaScript. Для её использования достаточно подключить скрипт и стили, доступные через CDN или через менеджеры пакетов, такие как npm.

Пример подключения через npm:

npm install dragula

В Jav * aScript:

import dragula from 'dragula';
import 'dragula/dist/dragula.css';

Для использования через CDN достаточно добавить ссылки в HTML:

<link rel="stylesheet" href="https://unpkg.com/dragula/dist/dragula.min.css">
<script src="https://unpkg.com/dragula/dist/dragula.min.js"></script>

Инициализация контейнеров

Dragula работает на основе контейнеров — элементов DOM, внутри которых возможна перетаскиваемость.

const containers = [document.getElementById('left'), document.getElementById('right')];
const drake = dragula(containers);

При этом каждый контейнер автоматически становится зоной перетаскивания. Элементы можно перемещать между контейнерами и внутри одного контейнера.

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

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

  • drag — элемент начал перемещаться.
  • drop — элемент был перемещён и отпущен.
  • over — курсор с перетаскиваемым элементом находится над контейнером.
  • out — элемент покидает контейнер.
  • cancel — перемещение было отменено.

Обработка этих событий позволяет реализовать гибкое управление логикой перемещения:

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

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

Dragula позволяет контролировать, какие элементы можно перетаскивать, и куда их можно помещать с помощью функций moves, accepts и invalid.

  • moves — определяет, может ли элемент быть перетянут.
dragula(containers, {
    moves: (el, source, handle, sibling) => handle.classList.contains('handle')
});
  • accepts — определяет, может ли контейнер принимать элемент.
dragula(containers, {
    accepts: (el, target, source, sibling) => target.id !== 'left'
});
  • invalid — предотвращает перетаскивание определённых элементов.
dragula(containers, {
    invalid: el => el.classList.contains('locked')
});

Обработка ошибок пользователя

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

Неправильная зона перетаскивания

Функция accepts позволяет предотвратить попадание элемента в недопустимый контейнер. Если пользователь пытается поместить элемент в запрещённую область, Dragula автоматически возвращает элемент в исходное положение.

Пример:

dragula(containers, {
    accepts: (el, target) => target.id !== 'forbidden'
}).on('drop', (el, target) => {
    if (target.id === 'forbidden') {
        console.warn(`Элемент ${el.textContent} не может быть помещён в запрещённый контейнер.`);
    }
});

Отмена перетаскивания

Иногда требуется позволить пользователю отменить перемещение до завершения. Событие cancel помогает реализовать это:

drake.on('cancel', (el, container, source) => {
    console.info(`Перемещение элемента ${el.textContent} отменено пользователем`);
});

Дублирование элементов

Если элементы могут быть случайно продублированы при перемещении, необходимо контролировать уникальность. Это можно реализовать через проверку данных элемента перед вставкой:

drake.on('drop', (el, target) => {
    const exists = Array.from(target.children).some(child => child.dataset.id === el.dataset.id && child !== el);
    if (exists) {
        drake.cancel(true);
        console.error(`Элемент с id ${el.dataset.id} уже существует в контейнере.`);
    }
});

Валидация пользовательского ввода

В некоторых случаях элемент содержит данные, которые нужно проверить перед перемещением. Например, при перетаскивании формы с заполненными полями:

drake.on('drop', (el) => {
    const input = el.querySelector('input');
    if (input && input.value.trim() === '') {
        drake.cancel(true);
        alert('Невозможно переместить пустое поле');
    }
});

Логирование ошибок и пользовательская обратная связь

Dragula позволяет интегрировать систему логирования ошибок и уведомления пользователя:

  • Консольные сообщения (console.warn, console.error) для разработчика.
  • Всплывающие уведомления для пользователя (например, через alert или кастомные уведомления).
  • Возможность визуального выделения ошибки, например, через добавление класса CSS .error к элементу.
drake.on('drop', (el, target) => {
    if (target.id === 'invalid') {
        el.classList.add('error');
        drake.cancel(true);
    }
});

Управление исключениями

Dragula не выбрасывает стандартные ошибки JavaScript при неправильных действиях пользователя, но можно использовать блоки try...catch для защиты собственных функций, вызываемых в обработчиках событий:

drake.on('drop', (el, target) => {
    try {
        processElement(el, target);
    } catch (error) {
        console.error('Ошибка обработки элемента:', error);
        drake.cancel(true);
    }
});

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

Оглавление