gu-mirror - зеркальный элемент

Dragula — это легкая и простая в использовании библиотека для перетаскивания элементов (drag-and-drop) на веб-странице. Одним из ключевых компонентов, обеспечивающих динамическое визуальное взаимодействие, является gu-mirror — зеркальный элемент. Он представляет собой визуальное отражение перетаскиваемого объекта, которое создается автоматически в момент начала drag-операции и следует за курсором до завершения перемещения.

Создание и назначение gu-mirror

При начале перетаскивания Dragula создает DOM-элемент, который является точной копией исходного объекта, но с определенными стилями и поведением:

  • position: абсолютная привязка к курсору.
  • pointer-events: none, чтобы зеркальный элемент не блокировал события мыши.
  • opacity: часто снижается для визуального отделения зеркала от оригинала.
  • z-index: максимальный, чтобы зеркало всегда было поверх остальных элементов.

Этот элемент позволяет пользователю видеть, что именно перетаскивается, не влияя на исходную структуру DOM контейнера.

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

При вызове dragula и передаче массивов контейнеров библиотека автоматически подготавливает gu-mirror для любого элемента, который начинается перетаскивать.

Стилизация зеркального элемента

gu-mirror создается с классом gu-mirror. Через CSS можно задавать его поведение и внешний вид:

.gu-mirror {
  opacity: 0.8;
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: rotate(2deg);
}
  • opacity регулирует прозрачность и визуальное отделение от исходного объекта.
  • background-color позволяет подчеркнуть контур перемещаемого элемента.
  • box-shadow создает эффект “поднятости” над остальными элементами.
  • transform можно использовать для легкого вращения, увеличения или сдвига, создавая эффект “живого” перемещения.

Поведение при drag-событиях

gu-mirror активно участвует в обработке событий Dragula:

  • drag — срабатывает при начале перетаскивания, когда gu-mirror создается и привязывается к курсору.
  • dragend — элемент исчезает после завершения перемещения.
  • shadowing — визуальный эффект перемещения через прозрачное отражение без изменения оригинала.
  • Перемещение зеркального элемента не нарушает layout контейнера и не вызывает пересчета DOM.
drake.on('drag', function(el, source) {
  console.log('Начало перетаскивания', el);
});

drake.on('dragend', function(el) {
  console.log('Перетаскивание завершено', el);
});

Управление gu-mirror вручную

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

  1. Изменение размеров зеркала — иногда нужно масштабировать объект:
drake.on('drag', function(el, source) {
  const mirror = document.querySelector('.gu-mirror');
  mirror.style.width = `${el.offsetWidth * 1.2}px`;
  mirror.style.height = `${el.offsetHeight * 1.2}px`;
});
  1. Добавление анимации движения — можно применять CSS transition для плавного перемещения:
.gu-mirror {
  transition: transform 0.2s ease;
}
  1. Изменение содержимого зеркала — иногда полезно отображать сокращенную версию или дополнительную информацию:
drake.on('drag', function(el, source) {
  const mirror = document.querySelector('.gu-mirror');
  mirror.innerHTML = `<strong>${el.textContent}</strong>`;
});

Ограничения и нюансы

  • gu-mirror не взаимодействует с событиями мыши, что предотвращает случайные клики или hover-эффекты.
  • Элемент всегда создается поверх остальных, поэтому важно следить за z-index других интерфейсных элементов.
  • Динамическое изменение размеров или содержимого зеркала может влиять на производительность при большом количестве элементов.
  • В сложных интерфейсах с nested контейнерами необходимо корректно отслеживать mirrorOffsetX и mirrorOffsetY, чтобы точка привязки соответствовала курсору.

Взаимодействие с другими функциями Dragula

  • moves — позволяет контролировать, какие элементы можно перетаскивать; gu-mirror будет создаваться только для этих элементов.
  • accepts — определяет, можно ли перемещать зеркало в конкретный контейнер.
  • invalid — элементы, которые не должны быть перетаскиваемыми, игнорируются, и gu-mirror не создается.
const drake = dragula([container1, container2], {
  moves: (el, source, handle) => handle.classList.contains('handle'),
  accepts: (el, target) => target.id !== 'no-drop',
});

Оптимизация производительности

Для страниц с большим количеством draggable элементов рекомендуется:

  • Использовать CSS transform вместо постоянного изменения top/left.
  • Ограничить количество активных зеркальных элементов одним в момент drag.
  • Применять will-change: transform; к gu-mirror для аппаратного ускорения.
.gu-mirror {
  will-change: transform;
}
  • Скрывать тяжелые визуальные эффекты до момента завершения перетаскивания.

gu-mirror является важным компонентом Dragula, обеспечивая визуальное и интерактивное сопровождение перемещения элементов. Правильное использование стилей, событий и ручной кастомизации позволяет создавать плавные и интуитивно понятные drag-and-drop интерфейсы.

Оглавление