Динамическое изменение конфигурации

Dragula — это легковесная библиотека для реализации перетаскивания элементов между контейнерами в веб-приложениях. Основной концепт Dragula строится на работе с контейнерами и элементами, которые могут быть перетащены. Библиотека обеспечивает автоматическую обработку событий drag, drop, over, out и предоставляет простые методы конфигурирования поведения.

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

Инициализация Dragula

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

const drake = dragula([document.querySelector('#container1'), document.querySelector('#container2')], {
    moves: function (el, source, handle, sibling) {
        return true; // все элементы можно перетаскивать
    },
    copy: false,
    revertOnSpill: true
});

Основные опции:

moves(el, source, handle, sibling) — функция, определяющая, можно ли перетаскивать конкретный элемент.
copy — если true, при перетаскивании создается копия элемента.
revertOnSpill — возвращает элемент в исходное место, если он был сброшен вне контейнера.

Динамическая конфигурация

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

1. Изменение контейнеров

Контейнеры можно добавлять и удалять динамически:

const newContainer = document.querySelector('#container3');
drake.containers.push(newContainer);

// Для удаления контейнера
const index = drake.containers.indexOf(newContainer);
if (index > -1) drake.containers.splice(index, 1);

Важно: после изменения массива контейнеров Dragula автоматически учитывает новые контейнеры при перетаскивании.

2. Изменение функций `moves` и `accepts`

Функции, определяющие возможность перетаскивания и допустимость сброса, можно заменить на лету:

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

drake.options.accepts = function(el, target, source, sibling) {
    return !target.classList.contains('locked'); // нельзя сбрасывать в заблокированные контейнеры
};

3. Управление копированием и возвращением элемента

Эти свойства также можно менять динамически:

drake.options.copy = true; // теперь элементы будут копироваться при перетаскивании
drake.options.revertOnSpill = false; // сброшенные вне контейнера элементы останутся на месте

Подписка на события

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

drake.on('drag', function(el) {
    el.style.opacity = '0.5';
});

drake.on('drop', function(el, target, source, sibling) {
    el.style.opacity = '';
});

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

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

Особенности динамической работы: даже если конфигурация moves или accepts изменена после инициализации, события продолжают корректно срабатывать, что позволяет строить сложную логику поведения.

Примеры сценариев использования динамической конфигурации

Переключение режима редактирования

let editMode = false;

function toggleEditMode() {
    editMode = !editMode;
    drake.options.moves = function(el) {
        return editMode; // перетаскивание доступно только в режиме редактирования
    };
}

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

function lockContainer(container, lock) {
    container.classList.toggle('locked', lock);
}
drake.options.accepts = function(el, target) {
    return !target.classList.contains('locked');
};

Изменение поведения копирования элементов

function enableCopyMode(copyMode) {
    drake.options.copy = copyMode;
}