mirrorContainer - контейнер для зеркала

В библиотеке Dragula mirrorContainer является ключевым параметром, определяющим, где будет размещаться зеркальная копия перетаскиваемого элемента (mirror element) во время операции drag-and-drop. По умолчанию зеркало создаётся и вставляется в document.body, однако mirrorContainer позволяет управлять этим поведением и помещать копию в любой другой контейнер.

Основная функция mirrorContainer – контролировать область DOM, в которой отображается перетаскиваемый элемент. Это особенно важно при использовании ограниченных по размеру или позиционированных контейнеров, где вставка зеркала в body может приводить к проблемам с отображением, перекрытием элементов или некорректной работой scroll.

Синтаксис

Параметр mirrorContainer передаётся в функцию dragula через объект опций:

const drake = dragula(containers, {
    mirrorContainer: document.getElementById('my-mirror-container')
});
  • containers – массив контейнеров, из которых можно перетаскивать элементы.
  • mirrorContainer – элемент DOM, в котором будет отображаться зеркало. Может быть любым элементом, поддерживающим вложенные узлы.

Если mirrorContainer не указан, Dragula по умолчанию использует document.body.

Поведение зеркала

Когда элемент начинает перетаскиваться:

  1. Создаётся зеркальная копия (mirror element) перетаскиваемого узла.
  2. Копия получает абсолютное позиционирование и стили, соответствующие исходному элементу.
  3. Этот элемент помещается в контейнер, указанный в mirrorContainer.
  4. По завершении операции drag-and-drop зеркало удаляется из DOM.

Использование mirrorContainer критично в случаях:

  • Контейнеры с ограниченной видимой областью (scrollable div), чтобы зеркало перемещалось вместе с прокруткой.
  • Контейнеры с overflow: hidden, где отображение в body вызовет обрезание элемента.
  • Сложные интерфейсы с фиксированными или абсолютными позициями дочерних контейнеров.

Примеры применения

Пример 1: Scrollable контейнер

<div id="scrollable-container" style="overflow:auto; height:200px;">
    <div class="item">Элемент 1</div>
    <div class="item">Элемент 2</div>
</div>
const container = document.getElementById('scrollable-container');
dragula([container], {
    mirrorContainer: container
});

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

Пример 2: Абсолютно позиционированный контейнер

<div id="fixed-mirror" style="position: relative; width: 500px; height: 500px;">
    <!-- зеркало будет вставлено сюда -->
</div>
<div id="source">
    <div class="item">Элемент A</div>
</div>
const fixedMirror = document.getElementById('fixed-mirror');
const source = document.getElementById('source');

dragula([source], {
    mirrorContainer: fixedMirror
});

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

Особенности работы

  • Стилизация: Зеркальный элемент наследует базовые стили перетаскиваемого элемента, но можно применять дополнительные CSS через класс .gu-mirror.
  • Совместимость с transform и overflow: Если контейнер с mirrorContainer имеет CSS-трансформации (transform: scale(), translate()), координаты зеркала корректируются относительно контейнера.
  • Удаление элемента: После завершения перетаскивания зеркало автоматически удаляется из DOM, поэтому не требуется ручное управление его удалением.
  • Поддержка нескольких контейнеров: Можно задать общий mirrorContainer для нескольких контейнеров одновременно, что упрощает контроль отображения зеркала в сложных интерфейсах.

Рекомендации по использованию

  • Выбирать контейнер, который не будет перекрываться другими элементами, чтобы зеркало оставалось видимым.
  • Избегать вложенных контейнеров с overflow: hidden без необходимости, чтобы не ограничивать видимость зеркала.
  • Использовать position: relative или position: absolute для контейнера зеркала, если требуется точное позиционирование.
  • Проверять совместимость с анимациями и transition, так как зеркало может временно менять размеры и координаты.

Связь с другими опциями Dragula

  • copy: Если включена опция copy: true, зеркало создаётся независимо от исходного элемента, но всё равно помещается в mirrorContainer.
  • moves и accepts: Эти функции не влияют на mirrorContainer, однако задают правила, при которых создаётся зеркало.
  • direction: Направление перетаскивания (vertical или horizontal) не изменяет поведение зеркала, но может потребовать адаптации стилей в mirrorContainer.

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

Оглавление