Настройка принимающих сеток

В библиотеке Muuri принимающая сетка (container grid) играет центральную роль в управлении элементами, их расположением и анимациями. Настройка такой сетки начинается с создания экземпляра класса Muuri и передачи ему DOM-элемента, который будет контейнером для элементов сетки.

const grid = new Muuri('.grid', {
  items: '.item',
  layout: {
    rounding: true
  },
  dragEnabled: true
});

Здесь ключевые моменты:

  • items — CSS-селектор для элементов, которые будут управляться сеткой.
  • layout.rounding — управление округлением координат элементов для плавной анимации.
  • dragEnabled — включает возможность перетаскивания элементов внутри сетки.

Опции контейнера

Сетку Muuri можно настраивать через набор опций:

  1. Layout Управляет размещением элементов:

    • fillGaps — если true, сетка будет автоматически заполнять пустые пространства.
    • horizontal — установка горизонтального расположения.
    • alignRight и alignBottom — выравнивание элементов по правому или нижнему краю контейнера.

  2. Drag & Drop Настройки перетаскивания позволяют создавать динамические интерактивные интерфейсы:

    • dragStartPredicate — функция, определяющая, можно ли начать перетаскивание конкретного элемента.
    • dragSort — разрешает сортировку элементов между несколькими сетками.
    • dragSortInterval — задаёт интервал проверки соседних сеток при сортировке.

  3. Sorting Позволяет задавать порядок элементов:

    grid.sort('data-name', { descending: false });

    Используется атрибут data-* для упорядочивания по различным критериям.

Динамическое добавление и удаление элементов

Muuri позволяет работать с динамическими изменениями DOM:

  • Добавление элементов:
const newItem = document.createElement('div');
newItem.classList.add('item');
grid.add(newItem);
  • Удаление элементов:
grid.remove(itemElement, { removeElements: true });

Флаг removeElements удаляет DOM-элемент из документа, а не только из сетки.

Взаимодействие нескольких сеток

Для сложных интерфейсов часто требуется несколько сеток, между которыми можно перетаскивать элементы. Основные параметры:

  • dragSort — массив сеток, с которыми разрешён обмен элементами.
  • dragSortPredicate — функция, которая контролирует возможность перемещения элемента в другую сетку.

Пример объединения двух сеток:

const grid1 = new Muuri('.grid1', { dragEnabled: true });
const grid2 = new Muuri('.grid2', { dragEnabled: true });

grid1.on('dragReleaseEnd', (item) => {
  grid2.refreshItems().layout();
});

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

При большом количестве элементов важно учитывать производительность:

  • Batch layout — использование grid.refreshItems().layout() после нескольких изменений элементов вместо постоянного вызова для каждого действия.
  • Скрытие элементов — элементы, скрытые через display: none, не рендерятся сеткой, что ускоряет работу.
  • RequestAnimationFrame — встроенная оптимизация анимаций обеспечивает плавность перемещений без лагов.

Пользовательские колбэки

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

  • on('move', callback) — срабатывает при перемещении элемента.
  • on('dragStart', callback) — начало перетаскивания.
  • on('layoutStart', callback) и on('layoutEnd', callback) — контроль над моментом перестройки сетки.

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

Кастомизация внешнего вида элементов

Muuri работает только с DOM-элементами, поэтому визуальное оформление полностью на CSS. Важные моменты:

  • Элементы должны иметь фиксированные размеры или быть управляемыми через CSS grid или flex для корректного позиционирования.
  • Для плавных анимаций следует использовать transition на свойства transform и opacity.
  • Класс .item рекомендуется использовать как контейнер, внутри которого можно размещать содержимое, текст, изображения или кнопки.

Итоговая структура принимающей сетки

Для сложных интерфейсов можно комбинировать все описанные возможности:

<div class="grid">
  <div class="item" data-name="A">Элемент A</div>
  <div class="item" data-name="B">Элемент B</div>
  <div class="item" data-name="C">Элемент C</div>
</div>
const grid = new Muuri('.grid', {
  items: '.item',
  layout: { fillGaps: true },
  dragEnabled: true,
  dragSort: [grid2],
});

Такое сочетание параметров обеспечивает гибкую настройку принимающей сетки, поддержку динамических изменений, перетаскивания и высокую производительность.

Оглавление