mirror:create и mirror:destroy

В библиотеке Shopify Draggable события mirror:create и mirror:destroy играют ключевую роль в управлении визуальной репрезентацией перетаскиваемого элемента. Они позволяют разработчику вмешиваться в процесс создания и уничтожения зеркала (mirror element), которое используется для отображения перемещаемого элемента поверх других элементов DOM без нарушения их структуры.

Событие mirror:create

Событие mirror:create срабатывает сразу после того, как Draggable создал зеркальный элемент, но до того, как он будет добавлен в DOM. Это предоставляет возможность кастомизировать его свойства, внешний вид и поведение.

Основные параметры события:

  • mirror — объект, представляющий сам зеркальный элемент. Доступны стандартные DOM-свойства (classList, style, appendChild и т.д.).
  • source — исходный элемент, который перетаскивается.
  • sensorEvent — событие сенсора (например, mousedown или touchstart), которое инициировало создание зеркала.

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

const draggable = new Draggable(document.querySelectorAll('.items'), {
  draggable: '.item'
});

draggable.on('mirror:create', (event) => {
  // Добавление кастомного класса
  event.mirror.classList.add('custom-mirror');

  // Прозрачность зеркала
  event.mirror.style.opacity = '0.8';

  // Можно клонировать содержимое source
  event.mirror.innerHTML = event.source.innerHTML;
});

Особенности:

  • Зеркальный элемент создается один раз за процесс перетаскивания.
  • Модификации в обработчике mirror:create не влияют на исходный элемент.
  • Позволяет добавлять анимацию, тени, границы и любые другие визуальные эффекты.

Событие mirror:destroy

Событие mirror:destroy срабатывает когда перетаскивание завершено и зеркальный элемент удаляется из DOM. Используется для очистки ресурсов, отмены временных стилей и анимаций, а также для синхронизации состояния интерфейса.

Основные параметры события:

  • mirror — объект зеркального элемента, который будет удален.
  • source — исходный элемент, который был перемещен.
  • sensorEvent — событие, которое инициировало завершение перетаскивания.

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

draggable.on('mirror:destroy', (event) => {
  // Логирование завершения перетаскивания
  console.log('Зеркальный элемент удален:', event.mirror);

  // Очистка кастомных классов
  event.mirror.classList.remove('custom-mirror');
});

Особенности:

  • Любые динамически созданные элементы или стили, связанные с mirror, должны быть удалены здесь.
  • Полезно для отмены анимаций завершения перетаскивания, чтобы DOM не оставался перегруженным.
  • Позволяет синхронизировать данные, например, обновить порядок элементов после drag-and-drop.

Практические советы по работе с mirror

  1. Стилизация зеркала через CSS Создание отдельного класса для зеркального элемента упрощает поддерживаемость кода и позволяет задавать transition, transform и shadow без вмешательства в JS.

  2. Избегать изменения исходного элемента Любые изменения следует производить только с mirror. Draggable автоматически синхронизирует положение source при drop.

  3. Оптимизация производительности Если mirror содержит сложную разметку, можно клонировать только необходимые элементы или использовать lightweight-элементы с CSS-содержимым.

  4. Анимации появления и исчезновения С помощью mirror:create можно добавлять fade-in или scale-анимации, а в mirror:destroy делать fade-out. Это создает ощущение плавного перемещения.

  5. Работа с сенсорными событиями Через sensorEvent можно определить тип взаимодействия: мышь, тачскрин, pointer, что позволяет адаптировать визуализацию зеркала под устройство.

Комбинированное использование mirror:create и mirror:destroy

Правильная работа с этими событиями позволяет создавать полностью кастомные эффекты перетаскивания. Например, можно сделать так:

draggable.on('mirror:create', (event) => {
  event.mirror.classList.add('dragging');
  event.mirror.style.transform = 'scale(1.05)';
});

draggable.on('mirror:destroy', (event) => {
  event.mirror.classList.remove('dragging');
});

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

Использование этих событий — ключ к гибкой настройке интерфейсов drag-and-drop, обеспечивающей чистый DOM, удобное взаимодействие и расширяемость визуальной логики Shopify Draggable.

Оглавление