remove - удаление элемента

Библиотека Dragula обеспечивает удобное управление перетаскиванием элементов в интерфейсе, включая возможность их удаления. В стандартной конфигурации Dragula не предоставляет отдельного метода для удаления, однако это можно реализовать через обработку событий и манипуляции с DOM.

Подключение и инициализация Dragula

Для работы с удалением элементов необходимо подключить саму библиотеку и определить контейнеры, в которых возможны операции перетаскивания:

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

const containers = [
    document.querySelector('#container1'),
    document.querySelector('#container2')
];

const drake = dragula(containers, {
    removeOnSpill: true
});

Ключевой момент: опция removeOnSpill: true позволяет автоматически удалять элемент из DOM, если он был отпущен вне контейнеров Dragula. Это основной инструмент для реализации удаления элементов.

События Dragula, влияющие на удаление

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

  • drag — срабатывает при начале перетаскивания элемента.
  • drop — срабатывает при успешном отпускании элемента в контейнере.
  • remove — срабатывает при удалении элемента через removeOnSpill.
  • cancel — срабатывает при отмене перетаскивания.

Пример использования события remove:

drake.on('remove', function (el, container, source) {
    console.log('Элемент удалён:', el);
});

Здесь el — это элемент, который был удалён, container — контейнер, в котором элемент находился, а source — исходный контейнер.

Программное удаление элементов

Кроме удаления через перетаскивание за пределы контейнера, можно реализовать удаление с помощью JavaScript. Dragula предоставляет метод drake.remove() только косвенно через события, поэтому для программного удаления удобно использовать стандартные методы DOM:

const element = document.querySelector('#itemToRemove');
element.parentNode.removeChild(element);

Для интеграции с Dragula часто полезно вызвать событие вручную, чтобы сохранить единообразие логики:

drake.emit('remove', element, element.parentNode, element.parentNode);

Настройка ограничения на удаление

Иногда требуется запретить удаление определённых элементов или контейнеров. Для этого используется опция invalid:

const drake = dragula(containers, {
    removeOnSpill: true,
    invalid: function (el, handle) {
        // Запретить удаление элементов с классом 'protected'
        return el.classList.contains('protected');
    }
});

Эта функция вызывается перед началом перетаскивания. Если возвращается true, Dragula блокирует перетаскивание и, соответственно, удаление.

Удаление элементов с подтверждением

Для предотвращения случайного удаления часто применяют диалог подтверждения:

drake.on('remove', function (el, container, source) {
    const confirmed = confirm('Вы действительно хотите удалить этот элемент?');
    if (!confirmed) {
        // Вставка элемента обратно в контейнер
        source.appendChild(el);
    }
});

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

Работа с динамически добавляемыми элементами

Dragula корректно обрабатывает динамически добавленные элементы, если они находятся в контейнерах, переданных при инициализации. Для удаления динамических элементов используется тот же подход с removeOnSpill или событиями remove:

const newElement = document.createElement('div');
newElement.textContent = 'Новый элемент';
containers[0].appendChild(newElement);

Элемент сразу становится доступным для перетаскивания и удаления, если он находится в контейнере Dragula.

Визуальная индикация удаления

Для улучшения UX полезно добавлять классы для анимации удаления:

.removing {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}
drake.on('remove', function (el) {
    el.classList.add('removing');
    setTimeout(() => el.remove(), 300);
});

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

Итоговые практики

  • Использование removeOnSpill: true для стандартного удаления элементов при перетаскивании за пределы контейнеров.
  • Обработка события remove для логирования, подтверждения или анимации удаления.
  • Применение функции invalid для ограничения удаления критически важных элементов.
  • Совмещение стандартных DOM-методов с событиями Dragula для управления элементами программно.

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

Оглавление