Placeholder и mirror элементы

Библиотека Shopify Draggable предоставляет мощный инструмент для создания перетаскиваемых элементов в интерфейсе. Одними из ключевых концепций, обеспечивающих гибкость перетаскивания, являются placeholder и mirror элементы. Они позволяют визуально отслеживать процесс drag-and-drop, делая интерфейс интуитивно понятным.

Mirror элемент

Mirror — это копия перетаскиваемого элемента, которая визуально следует за курсором мыши во время перетаскивания. Он не заменяет оригинальный элемент, а создается динамически библиотекой и управляется событиями Draggable.

Создание mirror элемента

Mirror создается автоматически при инициализации Draggable:

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

const container = document.querySelector('.draggable-container');

const draggable = new Draggable(container, {
  draggable: '.draggable-item',
});

В этом примере все элементы с классом .draggable-item будут иметь mirror при перетаскивании. Mirror элемент наследует стили оригинала, но позиционируется абсолютно поверх других элементов.

Кастомизация mirror

Mirror можно кастомизировать через события:

draggable.on('mirror:create', (event) => {
  event.mirror.style.backgroundColor = '#f0f0f0';
  event.mirror.style.boxShadow = '0 4px 10px rgba(0,0,0,0.2)';
});

Событие mirror:create позволяет изменить внешний вид зеркала перед его отображением. Дополнительно можно использовать события mirror:attached и mirror:destroy для управления жизненным циклом mirror элемента.

Особенности mirror элемента:

  • Не влияет на DOM-структуру исходного контейнера.
  • Всегда поверх других элементов с помощью z-index.
  • Легко кастомизируется через CSS и события.

Placeholder элемент

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

Включение placeholder

Для активации placeholder необходимо подключить модуль Sortable или использовать plugins Draggable:

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

const draggable = new Draggable(document.querySelector('.draggable-container'), {
  draggable: '.draggable-item',
  plugins: [Plugins.Placeholder],
});

Настройка placeholder

Placeholder можно настроить с помощью опций плагина:

Plugins.Placeholder.defaults = {
  tagName: 'div',
  className: 'draggable-placeholder',
};

Параметры:

  • tagName — тег, используемый для placeholder.
  • className — CSS класс для стилизации.

Работа с событиями placeholder

draggable.on('placeholder:created', (event) => {
  event.placeholder.style.border = '2px dashed #999';
  event.placeholder.style.height = `${event.dragged.clientHeight}px`;
});

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

Взаимодействие mirror и placeholder

В процессе перетаскивания mirror и placeholder работают совместно:

  1. Mirror следует за курсором, показывая перемещаемый объект.
  2. Placeholder указывает потенциальное место вставки.
  3. После отпускания мыши mirror удаляется, а placeholder заменяется исходным элементом на новом месте.
draggable.on('drag:start', (event) => {
  console.log('Начато перетаскивание', event.source);
});

draggable.on('drag:over', (event) => {
  console.log('Элемент над placeholder', event.over);
});

draggable.on('drag:stop', (event) => {
  console.log('Перетаскивание завершено', event.source);
});

Использование событий позволяет реализовать расширенные сценарии, например:

  • Анимацию вставки элементов.
  • Ограничение позиций для перетаскивания.
  • Взаимодействие с внешними контейнерами.

Практические рекомендации

  • Mirror элемент рекомендуется стилизовать через mirror:create, чтобы обеспечить визуальное соответствие оригиналу.
  • Placeholder должен быть адаптивным, особенно если контейнеры содержат элементы различной высоты.
  • Для сложных интерфейсов можно комбинировать несколько плагинов Draggable (например, Sortable + Placeholder) для расширенного поведения.
  • Mirror и placeholder должны быть максимально легковесными, чтобы не снижать производительность при большом количестве элементов.

Важные нюансы

  • Mirror и placeholder создаются динамически и автоматически уничтожаются после окончания drag.
  • Mirror не должен содержать интерактивных элементов (кнопок, ссылок) — это лишь визуальная копия.
  • Placeholder не переносит данные или события оригинального элемента — он служит исключительно для визуального позиционирования.

Mirror и placeholder обеспечивают высокую интерактивность интерфейсов с перетаскиванием и позволяют создавать плавные и предсказуемые drag-and-drop сценарии в любых приложениях на базе Shopify Draggable.

Оглавление