ResizeMirror

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

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

  • Mirror — это клонированный DOM-элемент, который следует за курсором пользователя во время перетаскивания.
  • ResizeMirror управляет размерами зеркала в реальном времени, синхронизируя его с размерами оригинального элемента.
  • Позволяет задать ограничения по минимальной и максимальной ширине/высоте зеркала.
  • Обеспечивает адаптивное поведение при изменении размеров контейнера или масштабировании страницы.

Подключение и использование

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

const draggable = new Draggable(document.querySelectorAll('.container'), {
  draggable: '.item',
  plugins: [ResizeMirror],
  resizeMirror: {
    minWidth: 50,
    minHeight: 50,
    maxWidth: 500,
    maxHeight: 500,
  }
});

Ключевые параметры:

  • minWidth и minHeight — минимальные размеры зеркала.
  • maxWidth и maxHeight — максимальные размеры зеркала.
  • resizeMirror: true — можно также активировать расширение без дополнительных параметров, тогда размеры зеркала будут полностью соответствовать оригинальному элементу.

Жизненный цикл ResizeMirror

  1. Создание зеркала При начале перетаскивания создается копия исходного элемента, которая получает класс .draggable-mirror. Расширение ResizeMirror сразу применяет к зеркалу размеры оригинального элемента.

  2. Изменение размера во время drag Если исходный элемент динамически меняет размеры (например, при адаптивной верстке или контенте с переменной высотой), ResizeMirror автоматически обновляет размеры зеркала, чтобы избежать рассогласования.

  3. Применение ограничений Размеры зеркала всегда проверяются на соответствие минимальным и максимальным ограничениям, заданным в конфигурации. Если значение выходит за пределы, применяется ближайшее допустимое.

  4. Удаление зеркала После завершения drag-and-drop события зеркало удаляется из DOM. ResizeMirror при этом снимает все обработчики событий и освобождает ресурсы.

Примеры продвинутого использования

Адаптация зеркала к контейнеру

const draggable = new Draggable(document.querySelectorAll('.container'), {
  draggable: '.item',
  plugins: [ResizeMirror],
  resizeMirror: {
    minWidth: 50,
    minHeight: 50,
    maxWidth: 300,
    maxHeight: 300,
    scaleContainer: document.querySelector('.container')
  }
});
  • scaleContainer — параметр, который позволяет ограничить размеры зеркала по границам контейнера, сохраняя соотношение сторон исходного элемента.

Пропорциональное масштабирование

resizeMirror: {
  maintainAspectRatio: true,
}
  • maintainAspectRatio гарантирует, что зеркало будет сохранять пропорции исходного элемента при изменении размера. Это особенно важно для изображений или карточек товара, где искажение недопустимо.

Взаимодействие с другими плагинами Draggable

  • Sortable: ResizeMirror работает вместе с Sortable, сохраняя корректные размеры зеркала при перестановке элементов.
  • Swappable: при обмене элементов ResizeMirror корректирует размеры зеркала, предотвращая визуальные баги.
  • Droppable: можно задать разные ограничения размеров зеркала для разных зон drop, обеспечивая гибкость интерфейса.

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

  • Использовать minWidth/minHeight и maxWidth/maxHeight для контроля UX и предотвращения слишком маленьких или слишком больших зеркал.
  • В сочетании с scaleContainer и maintainAspectRatio достигается эффект “живого” зеркала, идентичного исходному элементу.
  • Для сложных анимаций можно комбинировать ResizeMirror с CSS-переходами, чтобы масштабирование выглядело плавно.

Важные методы и события

  • draggable.on('mirror:created', event => {}) — событие, срабатывающее при создании зеркала.
  • draggable.on('mirror:resized', event => {}) — событие при изменении размеров зеркала.
  • draggable.on('mirror:destroy', event => {}) — срабатывает при удалении зеркала из DOM.

Эти события позволяют кастомизировать поведение ResizeMirror, добавлять анимацию или дополнительную логику, например, подсветку зон drop.

ResizeMirror обеспечивает стабильное и визуально корректное перетаскивание элементов с динамическими размерами, делая интерфейсы более отзывчивыми и интуитивными. Он полностью интегрируется с остальными плагинами Shopify Draggable и предоставляет мощный инструмент для управления зеркалами перетаскиваемых элементов.

Оглавление