gu-hide - скрытие оригинала

Для использования Dragula необходимо подключить библиотеку. Она доступна через CDN или через пакетный менеджер npm. Пример подключения через CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.3/dragula.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.3/dragula.min.js"></script>

При использовании npm:

npm install dragula

И в коде:

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

Основные концепции Dragula

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

Перетаскивание элементов внутри одного контейнера и между контейнерами.
Клонирование элементов.
Настройка ограничений на перенос.
События для обработки начала и окончания перетаскивания, изменения контейнера и других действий.

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

Инициализация выполняется вызовом функции dragula() с массивом контейнеров:

const containers = [
  document.getElementById('left'),
  document.getElementById('right')
];

const drake = dragula(containers);

Параметр containers определяет области, в которых возможен drag-and-drop. Если контейнеры не указаны, Dragula автоматически создаёт пустой контейнер.

Параметр `copy` и скрытие оригинала

Опция copy отвечает за клонирование элементов при перетаскивании. Она принимает значение true, false или функцию. Если copy установлено в true, перетаскивание создаёт копию элемента, а оригинал остаётся на месте.

Однако для некоторых интерфейсов необходимо скрывать оригинальный элемент на время перетаскивания, чтобы не создавать видимого дублирования. Для этого используется внутренняя логика Dragula, основанная на CSS-классе gu-hide.

const drake = dragula(containers, {
  copy: true,
  accepts: (el, target, source, sibling) => true
});

Когда элемент переносится, Dragula добавляет класс gu-hide к оригинальному элементу, если включено клонирование. Этот класс скрывает исходный элемент через CSS:

.gu-hide {
  display: none !important;
}

Настройка скрытия оригинала через события

Можно более гибко управлять поведением через события drag, cloned, drop:

drake.on('drag', (el) => {
  el.classList.add('gu-hide'); // Прячем оригинал сразу при начале перетаскивания
});

drake.on('cloned', (clone, original, type) => {
  // type может быть 'copy' или 'mirror'
  if (type === 'copy') {
    original.classList.add('gu-hide');
  }
});

drake.on('drop', (el, target, source, sibling) => {
  el.classList.remove('gu-hide'); // Возвращаем оригинал после завершения
});

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

Скрытие оригинала при использовании зеркала (`mirror`)

Dragula создаёт зеркальный элемент (mirror), который визуально перемещается по экрану, а оригинал остаётся в DOM. Если требуется скрыть оригинал, чтобы он не мешал визуальному восприятию, используется комбинация copy и gu-hide:

const drake = dragula(containers, {
  copy: (el, source) => true
});

drake.on('cloned', (clone, original, type) => {
  if (type === 'copy') {
    original.classList.add('gu-hide'); // Прячем оригинал
  }
});

drake.on('drop', (el) => {
  const originals = document.querySelectorAll('.gu-hide');
  originals.forEach(item => item.classList.remove('gu-hide')); // Возврат всех скрытых
});

CSS и пользовательский контроль

Класс gu-hide можно использовать в сочетании с другими стилями:

.gu-hide {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}

Использование pointer-events: none предотвращает клики по скрытому элементу, а opacity: 0 позволяет при необходимости оставлять пространство в layout.