containers - массив контейнеров

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

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

Для создания функциональности перетаскивания необходимо передать Dragula массив контейнеров:

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

const drake = dragula(containers);

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

Динамическое добавление контейнеров

Контейнеры можно добавлять и после инициализации Dragula с помощью метода drake.containers.push():

const newContainer = document.getElementById('container4');
drake.containers.push(newContainer);

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

Контроль допустимых контейнеров

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

const drake = dragula(containers, {
    accepts: function (el, target, source, sibling) {
        return target.id !== 'container3'; // запрет перемещения в container3
    }
});

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

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

Dragula предоставляет набор событий, связанных с перемещением элементов. Для массивов контейнеров особенно важны события drop, drag, over и out:

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

drake.on('over', (el, container) => {
    container.style.background = '#f0f0f0';
});

drake.on('out', (el, container) => {
    container.style.background = '';
});

События применяются к каждому контейнеру в массиве. При добавлении нового контейнера через drake.containers.push() события автоматически начинают работать и с ним.

Массив контейнеров и перетаскиваемые элементы

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

const drake = dragula(containers, {
    moves: function (el, source, handle, sibling) {
        return el.classList.contains('draggable'); // только элементы с классом draggable
    }
});

Таким образом, массив контейнеров задает область работы Dragula, а moves контролирует конкретные элементы, доступные для перетаскивания.

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

Для удаления контейнера из массива используется стандартное обращение к массиву:

const index = drake.containers.indexOf(containerToRemove);
if (index !== -1) {
    drake.containers.splice(index, 1);
}

После удаления контейнера элементы внутри него перестают участвовать в перетаскивании. События, привязанные к удаленному контейнеру, больше не срабатывают.

Итоговые рекомендации по массиву контейнеров

  • Использовать массив контейнеров для одновременного контроля нескольких зон перетаскивания.
  • Для динамических интерфейсов поддерживать возможность добавления и удаления контейнеров через drake.containers.push() и splice.
  • Контролировать правила перемещения с помощью accepts и ограничивать элементы с помощью moves.
  • События Dragula автоматически работают со всеми контейнерами в массиве, включая добавленные динамически.

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

Оглавление