Структура документации

Muuri — это современная библиотека для создания динамических, анимационных сеток (grid) в браузере с полной поддержкой drag-and-drop, сортировки и фильтрации элементов. Основной объект в библиотеке — это Grid, который управляет контейнером с элементами и их поведением.

Каждый Grid создается на основе DOM-элемента-контейнера:

const grid = new Muuri('.grid', {
  layout: {
    fillGaps: true
  },
  dragEnabled: true
});
  • fillGaps — автоматически заполняет пустые места при изменении элементов.
  • dragEnabled — разрешает перетаскивание элементов.

Объект Grid предоставляет API для управления элементами, их позиционированием и анимациями.

Структура DOM и элементы сетки

Для корректной работы Muuri, структура документа должна быть предсказуемой:

<div class="grid">
  <div class="item">
    <div class="item-content">Элемент 1</div>
  </div>
  <div class="item">
    <div class="item-content">Элемент 2</div>
  </div>
</div>
  • .grid — контейнер сетки.
  • .item — каждый отдельный элемент сетки. Muuri управляет их позиционированием.
  • .item-content — содержимое элемента. Muuri использует его для анимации размеров, но не для логики сетки.

Каждый элемент внутри сетки автоматически получает позиционирование через CSS transform, а библиотека управляет этим через JavaScript.

Конфигурация сетки

Grid поддерживает множество опций:

  • layout — настройки расположения:

    • fillGaps — заполняет пустые участки.
    • horizontal — ориентация по горизонтали.
    • alignRight / alignBottom — выравнивание элементов.

  • dragEnabled — включает/отключает перетаскивание.

  • dragSort — определяет поведение при перемещении элементов:

    dragSort: (item, grid, event) => {
  return grid; // элемент можно перемещать в эту сетку
}

  • dragContainer — DOM-элемент, в котором создается drag-объект. По умолчанию это body.

  • dragStartPredicate — функция для определения начала перетаскивания:

    dragStartPredicate: {
  distance: 10,
  delay: 0,
  handle: '.item-content'
}

  • layoutOnInit — если true, сетка будет расположена при инициализации.

Работа с элементами

Muuri предоставляет методы для добавления, удаления и обновления элементов:

  • grid.add([elements], options) — добавляет новые элементы.
  • grid.remove([elements], options) — удаляет элементы.
  • grid.show([elements], options) / grid.hide([elements], options) — управление видимостью.
  • grid.refreshItems() — обновляет размеры и позиции элементов.
  • grid.layout() — пересчитывает и анимирует расположение элементов.

Пример добавления нового элемента:

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

grid.add(element);

Фильтрация и сортировка

Фильтрация позволяет скрывать элементы по условию:

grid.filter(item => item.getElement().textContent.includes('1'));
  • item.getElement() возвращает DOM-элемент.
  • Фильтр может быть функцией или строкой (CSS-селектор).

Сортировка применяется через grid.sort(compareFunction):

grid.sort((a, b) => {
  return a.getElement().textContent.localeCompare(b.getElement().textContent);
});

Можно сортировать по атрибутам, тексту или произвольным значениям, присвоенным элементам.

Drag-and-Drop

Drag-and-drop — одно из ключевых преимуществ Muuri. Для настройки перетаскивания можно использовать:

grid.on('dragStart', item => console.log('Начало перетаскивания', item));
grid.on('dragEnd', item => console.log('Конец перетаскивания', item));
grid.on('dragReleaseEnd', item => grid.layout());
  • dragStart — срабатывает при начале перемещения.
  • dragEnd — при завершении перетаскивания.
  • dragReleaseEnd — после анимации возврата на позицию.

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

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

Muuri использует requestAnimationFrame для плавных анимаций. Основные параметры:

  • layout.duration — продолжительность анимации в миллисекундах.
  • layout.easing — тип интерполяции (ease, linear, easeOutQuint).
  • dragReleaseDuration — скорость возврата элемента после перетаскивания.

Эффективность обеспечивается минимизацией перерисовки DOM и использованием transform для перемещения элементов вместо изменения top/left.

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

Muuri позволяет связывать несколько сеток для drag-and-drop:

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

grid1.on('dragReleaseEnd', item => {
  if (!grid1.getItems().includes(item)) grid2.add(item.getElement());
});
  • Элементы можно перемещать между сетками.
  • События dragReleaseEnd и dragStart помогают отслеживать перемещения.
  • Связанные сетки упрощают создание интерактивных интерфейсов с множеством контейнеров.

Дополнительные возможности

  • Стилизация и responsive: Muuri работает с любыми CSS-стилями и автоматически учитывает размеры при изменении окна.
  • Custom layout: можно создавать собственные алгоритмы позиционирования элементов.
  • Events API: полный набор событий для контроля поведения сетки (add, remove, show, hide, filter, sort).
  • Element methods: каждый элемент предоставляет методы show(), hide(), getElement(), getGrid().

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

Оглавление