Отключение mirror

В библиотеке Shopify Draggable ключевым элементом для визуальной обратной связи при перетаскивании является объект mirror. По умолчанию при начале перетаскивания создаётся его копия, которая следует за курсором мыши, обеспечивая пользователю визуальное подтверждение выбранного элемента. Иногда требуется отключить этот функционал, чтобы элементы перемещались напрямую без создания дублирующей визуальной копии.

Настройка mirror через Draggable

Объект mirror настраивается через опции конструктора Draggable. Основной параметр, отвечающий за включение или отключение копии, — mirror. Его структура позволяет не только включать или отключать mirror, но и управлять поведением его класса, ограничениями по контейнеру и обработкой событий.

Пример инициализации с отключением mirror:

import { Draggable } from '@shopify/draggable';

const draggable = new Draggable(document.querySelectorAll('.draggable-container'), {
  draggable: '.draggable-item',
  mirror: {
    constrainDimensions: false,
    appendTo: null,
    removeOnSpill: false,
    clone: false // отключает создание визуальной копии
  }
});

Здесь ключевой параметр clone: false гарантирует, что при перетаскивании элемент не будет дублироваться визуально. Элемент остаётся тем же, который был выбран пользователем.

Параметры mirror

  1. constrainDimensions – при true размеры mirror будут соответствовать исходному элементу. Для отключенного mirror этот параметр не имеет эффекта.
  2. appendTo – определяет контейнер, в котором создаётся mirror. Если mirror отключён, параметр игнорируется.
  3. removeOnSpill – при true mirror удаляется, если элемент отпущен за пределами контейнера. При clone: false также не применяется.
  4. clone – управляет созданием копии. true создаёт mirror, false отключает его полностью.

Влияние на события Draggable

При отключении mirror изменяется поведение событий drag:start, drag:move и drag:stop.

  • drag:start – вызывается для исходного элемента, а не для копии. Это позволяет работать напрямую с DOM-элементом без необходимости синхронизации mirror.
  • drag:move – координаты перемещения привязываются к исходному элементу. Нет необходимости отслеживать отдельный элемент mirror.
  • drag:stop – изменения применяются сразу к исходному элементу, что упрощает логику обновления состояния интерфейса.

Пример слушателя событий с отключенным mirror:

draggable.on('drag:start', (evt) => {
  console.log('Начало перетаскивания элемента:', evt.source);
});

draggable.on('drag:move', (evt) => {
  evt.source.style.transform = `translate(${evt.delta.x}px, ${evt.delta.y}px)`;
});

draggable.on('drag:stop', (evt) => {
  evt.source.style.transform = '';
});

Практические сценарии отключения mirror

  • Перетаскивание без визуальной дубликации — полезно, когда интерфейс содержит сложные стили или анимации, и mirror нарушает визуальное восприятие.
  • Динамическая работа с DOM — когда элементы должны перемещаться напрямую без создания временных копий.
  • Оптимизация производительности — отключение mirror снижает количество операций с DOM, особенно при большом количестве элементов.

Советы по интеграции

  • При отключении mirror важно правильно обрабатывать стили исходного элемента, чтобы визуальные сдвиги выглядели естественно.
  • Для плавного перемещения элементов рекомендуется использовать requestAnimationFrame при изменении transform, чтобы избежать подёргивания интерфейса.
  • В случае взаимодействия с другими Draggable-контейнерами следует проверять события over и out, так как mirror больше не участвует в этих процессах.

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

Оглавление