copySortSource - сортировка в исходном контейнере

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

Основные принципы работы copySortSource

Опция copySortSource используется вместе с параметром copy, который отвечает за создание копий элементов при перетаскивании. Когда copy = true, элемент, который перемещается, дублируется, а оригинал остаётся на месте. В стандартном режиме исходный контейнер становится «не сортируемым», если в него перетаскивается копия. Чтобы сохранить возможность сортировки внутри исходного контейнера даже при использовании копирования, включается copySortSource.

copySortSource = true позволяет:
- перетаскивать элементы внутри исходного контейнера, даже если копирование активно;
- комбинировать перемещение и копирование элементов без потери интерактивности;
- использовать исходный контейнер как полноценный источник для drag-and-drop и одновременно как сортируемый список.
copySortSource = false (значение по умолчанию):
- исходный контейнер при активном копировании становится «только источником»;
- элементы внутри исходного контейнера нельзя сортировать, они фиксированы;
- перетаскивание ограничено только внешними контейнерами.

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

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

const containers = document.querySelectorAll('.container');

const drake = dragula([...containers], {
    copy: true,
    copySortSource: true,
    moves: (el, source, handle, sibling) => true
});

Пояснения к коду:

copy: true — включение режима копирования.
copySortSource: true — позволяет сортировать элементы в исходном контейнере.
moves — функция, которая возвращает true для разрешения перетаскивания элементов. Можно добавлять фильтры по классу, атрибуту или позиции.

Поведение при сортировке и копировании

С включённой опцией copySortSource Dragula ведёт себя следующим образом:

При перетаскивании элемента в другой контейнер создаётся копия.
Исходный элемент остаётся на месте, но его можно перемещать внутри исходного контейнера.
Все события Dragula, такие как drag, drop, remove, и shadow продолжают корректно работать с исходным контейнером.

Это делает copySortSource особенно полезным для интерфейсов типа «канбан», где есть список задач, которые можно как дублировать, так и сортировать внутри исходного списка.

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

1. Канбан-доска с копированием задач

const columns = document.querySelectorAll('.kanban-column');

const drake = dragula([...columns], {
    copy: true,
    copySortSource: true,
    accepts: (el, target) => target !== el.parentNode
});

Каждая колонка является контейнером.
Элементы могут копироваться из одной колонки в другую.
Исходная колонка остаётся полностью сортируемой.

2. Сортируемый список шаблонов

const templateList = document.querySelector('.templates');
const board = document.querySelector('.board');

const drake = dragula([templateList, board], {
    copy: true,
    copySortSource: true
});

templateList содержит шаблонные элементы, которые можно перетаскивать в board.
Элементы в templateList можно переставлять внутри списка.
На board элементы добавляются в виде копий.

Настройка событий при использовании copySortSource

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

drag — срабатывает при начале перетаскивания.
drop — срабатывает при завершении перетаскивания.
over и out — позволяют визуально подсвечивать контейнеры при наведении.
shadow — создаёт визуальный «плейсхолдер» для перемещаемого элемента.

Пример обработки событий:

drake.on('drop', (el, target, source, sibling) => {
    if(source === templateList) {
        console.log('Элемент скопирован из шаблонов');
    } else {
        console.log('Элемент перемещён внутри списка');
    }
});