Паттерны интеграции

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

const grid = new Muuri('.grid', {
  dragEnabled: true,
  layout: {
    fillGaps: true,
    horizontal: false,
    alignRight: false,
    alignBottom: false,
    rounding: true
  }
});

Здесь ключевые параметры:

  • dragEnabled – включает перетаскивание элементов.
  • layout.fillGaps – автоматически заполняет пустые места после перемещения или удаления элементов.
  • layout.rounding – округление координат для предотвращения субпиксельного смещения.

Интеграция с динамическим контентом

Для работы с динамическими данными используется метод add(), который добавляет элементы в существующую сетку:

const newItem = document.createElement('div');
newItem.className = 'item';
newItem.innerHTML = '<div class="item-content">Новый элемент</div>';

grid.add(newItem);
grid.layout(); // Перестройка сетки после добавления

Для множественного добавления применяется массив:

const items = document.querySelectorAll('.new-items .item');
grid.add(Array.from(items));
grid.layout();

События и управление элементами

Muuri предоставляет богатый набор событий для контроля поведения элементов:

  • move – срабатывает при перемещении элемента.
  • dragStart, dragEnd – управление процессом drag-and-drop.
  • layoutStart, layoutEnd – отслеживание начала и конца перестройки сетки.

Пример подписки на события:

grid.on('dragEnd', (item) => {
  console.log('Элемент перемещён:', item.getElement());
});

Методы управления элементами:

  • remove(item, options) – удаление элемента с анимацией.
  • show(item, options) / hide(item, options) – управление видимостью с анимацией.
  • sort(compareFunction) – сортировка элементов по пользовательской функции.
  • filter(filterFunction) – фильтрация элементов на основе условий.

Интеграция с фреймворками

React В React сетка создается после монтирования компонента с помощью useEffect. Элементы рекомендуется рендерить через state, а Muuri инициализировать на DOM-узле:

useEffect(() => {
  const grid = new Muuri('.grid', { dragEnabled: true });
  return () => grid.destroy(); // Очистка при размонтировании
}, []);

Vue Для Vue удобно использовать ref для DOM-сетки:

<template>
  <div ref="grid" class="grid">
    <div v-for="item in items" :key="item.id" class="item">
      {{ item.content }}
    </div>
  </div>
</template>

<script>
import Muuri from 'muuri';

export default {
  mounted() {
    this.grid = new Muuri(this.$refs.grid, { dragEnabled: true });
  },
  beforeDestroy() {
    this.grid.destroy();
  }
}
</script>

Работа с API данных и сервером

Для динамического обновления сетки из API можно использовать методы add, remove, refreshItems:

fetch('/api/items')
  .then(res => res.json())
  .then(data => {
    const elements = data.map(item => {
      const div = document.createElement('div');
      div.className = 'item';
      div.innerHTML = `<div class="item-content">${item.name}</div>`;
      return div;
    });
    grid.add(elements);
    grid.layout();
  });

Если элементы изменяются на сервере, важно поддерживать синхронизацию: сначала удалить устаревшие элементы через remove(), затем добавить новые через add(), и завершить вызовом layout().

Адаптивные сетки и медиазапросы

Muuri поддерживает адаптивное поведение сетки. Для изменения конфигурации в зависимости от ширины экрана используется перезапуск layout:

window.addEventListener('resize', () => {
  grid.refreshItems().layout();
});

Можно комбинировать с CSS Grid, задавая разное количество колонок через медиазапросы и автоматически перестраивая сетку через refreshItems().

Комбинированные паттерны

  • Drag-and-drop + фильтрация: при перетаскивании элементов фильтрация не нарушает порядок сетки. Для этого после dragEnd вызывается filter() и layout().
  • Сортировка + динамическое добавление: новые элементы добавляются с помощью add(), затем вызывается sort() и layout() для поддержания порядка.
  • Анимации: параметры show и hide позволяют плавно отображать элементы при изменении данных.

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

Оглавление