Добавление и удаление контейнеров

Dragula — это легковесная библиотека для реализации перетаскивания элементов между контейнерами и внутри одного контейнера. Контейнеры в Dragula определяют области, между которыми можно перемещать элементы. Управление контейнерами включает их добавление, удаление и динамическое изменение поведения.

Добавление контейнеров

Создание Dragula-инстанса начинается с указания контейнеров. Контейнеры можно передавать как массив DOM-элементов или CSS-селекторов:

const container1 = document.getElementById('container1');
const container2 = document.getElementById('container2');

const drake = dragula([container1, container2]);

Ключевые моменты:

  • Массив контейнеров позволяет сразу определить все области перетаскивания.
  • Динамическое добавление контейнеров возможно через метод drake.containers.push(newContainer), где newContainer — это DOM-элемент.

Пример динамического добавления контейнера:

const newContainer = document.createElement('div');
newContainer.id = 'container3';
document.body.appendChild(newContainer);

drake.containers.push(newContainer);

В этом случае Dragula автоматически начнет отслеживать элементы внутри container3, делая их доступными для перетаскивания между другими контейнерами.

Удаление контейнеров

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

const containerToRemove = document.getElementById('container2');
drake.containers = drake.containers.filter(container => container !== containerToRemove);

После этого Dragula перестанет воспринимать удаленный контейнер как активную область для перетаскивания. Элементы, находившиеся в удаленном контейнере, остаются в DOM, но Dragula не будет их перемещать между другими контейнерами.

Особенности работы с динамическими контейнерами

  1. События Dragula продолжает генерировать стандартные события (drag, drop, over, out) для динамически добавленных контейнеров без дополнительной настройки. Для удаления контейнера важно убедиться, что элементы из него больше не участвуют в активных перемещениях, иначе могут возникать ошибки при обработке событий drop.

  2. Фильтрация и копирование элементов При использовании опций copy и accepts стоит учитывать динамически добавленные контейнеры. Функция accepts вызывается при попытке перемещения элемента, и можно динамически проверять, допустим ли целевой контейнер:

    const drake = dragula({
    containers: [container1],
    accepts: (el, target) => drake.containers.includes(target)
});

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

  3. Удаление контейнеров и очистка событий Если контейнер полностью удаляется из DOM, важно убедиться, что на его элементы не назначены дополнительные слушатели Dragula. В противном случае возможны утечки памяти или ошибки при вызове событий drop и over.

Практический пример: динамическое управление контейнерами

const drake = dragula([]);

function addContainer(id) {
    const container = document.createElement('div');
    container.id = id;
    document.body.appendChild(container);
    drake.containers.push(container);
}

function removeContainer(id) {
    const container = document.getElementById(id);
    drake.containers = drake.containers.filter(c => c !== container);
    container.remove();
}

// Добавление контейнеров
addContainer('containerA');
addContainer('containerB');

// Удаление контейнера через 5 секунд
setTimeout(() => {
    removeContainer('containerA');
}, 5000);

В этом примере показано полное управление жизненным циклом контейнеров: создание, подключение к Dragula, удаление из массива контейнеров и из DOM.

Рекомендации по использованию

  • Сразу создавать массив активных контейнеров, чтобы Dragula корректно отслеживал области перетаскивания.
  • Динамическое добавление контейнеров удобно для интерфейсов с изменяемой структурой (например, доски Kanban).
  • Удаление контейнеров через фильтрацию массива обеспечивает безопасное исключение контейнеров из Dragula без необходимости пересоздавать инстанс.
  • Контроль событий при удалении контейнера предотвращает ошибки и утечки памяти.

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

Оглавление