Placeholder при перетаскивании

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

Включение и настройка placeholder

Чтобы активировать placeholder, необходимо задать соответствующую опцию в конфигурации Muuri при создании сетки:

const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragSort: true,
  dragPlaceholder: {
    enabled: true,
    createElement: function(item) {
      const placeholder = item.getElement().cloneNode(true);
      placeholder.style.opacity = '0.3';
      placeholder.style.transform = '';
      return placeholder;
    },
    duration: 300
  }
});

Пояснение ключевых свойств:

  • enabled — включает или отключает отображение placeholder при перетаскивании.
  • createElement — функция, которая создаёт элемент placeholder на основе перемещаемого блока. Можно изменять стиль, размер, прозрачность и другие CSS-свойства.
  • duration — задаёт время анимации появления и исчезновения placeholder в миллисекундах.

Поведение placeholder при сортировке

При перетаскивании элементов с включённым placeholder, библиотека автоматически отслеживает возможные позиции вставки. Placeholder занимает место элемента в сетке, а остальные блоки аккуратно смещаются, создавая визуальный эффект «раздвигания» элементов.

Важные моменты:

  • Placeholder не влияет на исходный порядок элементов, пока перетаскивание не завершено.
  • Можно управлять анимацией перемещения соседних элементов, задавая опции layout и layoutDuration.
  • Для сложных сеток с различными размерами элементов рекомендуется создавать placeholder с точной подгонкой размеров через getBoundingClientRect().
createElement: function(item) {
  const rect = item.getElement().getBoundingClientRect();
  const placeholder = document.createElement('div');
  placeholder.style.width = rect.width + 'px';
  placeholder.style.height = rect.height + 'px';
  placeholder.style.backgroundColor = 'rgba(0,0,0,0.1)';
  placeholder.style.borderRadius = '4px';
  return placeholder;
}

Настройка внешнего вида placeholder

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

  • Прозрачность — подчёркивает, что элемент временный.
  • Цветовая заливка или граница — показывает потенциальное место вставки.
  • Анимации — добавляют плавность перехода при изменении позиции элементов.
.muuri-placeholder {
  border: 2px dashed #ccc;
  background-color: rgba(200, 200, 200, 0.2);
  border-radius: 6px;
}

Эту CSS-классу можно назначать через createElement для единообразного оформления всех placeholder.

События, связанные с placeholder

Muuri предоставляет несколько событий, позволяющих управлять placeholder:

  • dragStart — вызывается при начале перетаскивания, можно инициализировать дополнительные эффекты.
  • dragMove — срабатывает при перемещении элемента, placeholder обновляет своё положение.
  • dragReleaseEnd — placeholder исчезает, а элемент встаёт на новое место.
  • dragReleaseStart — момент, когда placeholder фиксируется в потенциальной позиции.

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

grid.on('dragReleaseEnd', function(item) {
  console.log('Элемент вставлен на новое место');
});

Интеграция с другими функциями сетки

Placeholder корректно работает с:

  • Фильтрацией элементов — placeholder учитывает только видимые элементы.
  • Сортировкой элементов — placeholder учитывает порядок после сортировки.
  • Динамическим добавлением и удалением элементов — placeholder автоматически адаптируется к изменениям сетки.
grid.add([newElement], {layout: 'instant'});

При добавлении нового элемента в сетку placeholder автоматически займёт его потенциальное место при следующем перетаскивании.

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

  • Для сеток с большим количеством элементов рекомендуется создавать легкие placeholder без сложных DOM-структур.
  • Избегать тяжелых CSS-анимаций на placeholder, так как они могут замедлить перетаскивание.
  • Использовать requestAnimationFrame для кастомной анимации placeholder при необходимости тонкой настройки.

Заключение по функциональности

Placeholder в Muuri обеспечивает плавный, предсказуемый UX при перетаскивании элементов сетки. Его гибкая настройка через createElement, события и CSS позволяет создавать как минималистичные, так и сложные визуальные эффекты, полностью контролируя поведение сетки и анимации.

Оглавление