Фиксированные и динамические элементы

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

Фиксированные элементы

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

Создание фиксированных элементов

Для того чтобы сделать элемент фиксированным, используется класс item в комбинации с опцией dragEnabled и методом add. Пример:

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

const fixedElement = document.querySelector('.fixed-item');
grid.add(fixedElement, { dragEnabled: false });
  • dragEnabled: false отключает возможность перетаскивания.
  • Элемент добавляется в сетку, но при этом не участвует в автоматическом перестроении сетки.

Стилизация фиксированных элементов

Для визуального выделения фиксированных элементов можно использовать CSS-свойства:

.fixed-item {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
}
  • position: absolute гарантирует, что элемент не смещается другими элементами сетки.
  • z-index контролирует порядок наложения.
  • pointer-events: none делает элемент интерактивным только через скрипт, предотвращая вмешательство мыши в сетку.

Взаимодействие с динамическими элементами

Фиксированные элементы не конфликтуют с динамическими. При добавлении или удалении динамических элементов Muuri перестраивает только сетку динамических элементов, оставляя фиксированные на своих местах.

Динамические элементы

Динамические элементы — это элементы, которые участвуют во всех операциях сетки: сортировке, фильтрации, перетаскивании и анимации.

Создание динамических элементов

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

const dynamicItem = document.createElement('div');
dynamicItem.classList.add('item');
grid.add(dynamicItem);
  • Элемент автоматически получает поведение перетаскивания (если включено dragEnabled).
  • Muuri автоматически управляет позицией, анимацией и фильтрацией динамических элементов.

Динамическое управление элементами

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

  • grid.add(items) — добавление элементов в сетку.
  • grid.remove(items, { removeElements: true }) — удаление элементов.
  • grid.filter(function(item) { return item.getElement().classList.contains('active'); }) — фильтрация.
  • grid.sort(function(a, b) { return a.getElement().dataset.order - b.getElement().dataset.order; }) — сортировка по произвольному критерию.

Обновление размеров и расположения

Динамические элементы могут менять свои размеры, и сетка автоматически это учитывает через метод:

grid.refreshItems().layout();
  • refreshItems() обновляет внутренние размеры элементов.
  • layout() перестраивает сетку с анимацией.

Смешанные сетки

Часто возникает задача смешать фиксированные и динамические элементы. Muuri позволяет создавать гибридные сетки, где часть элементов статична, а часть подвижна.

Пример смешанной сетки

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

const fixed = document.querySelectorAll('.fixed-item');
fixed.forEach(item => grid.add(item, { dragEnabled: false }));

const dynamic = document.querySelectorAll('.dynamic-item');
dynamic.forEach(item => grid.add(item));
  • Фиксированные элементы остаются неподвижными.
  • Динамические элементы можно перетаскивать и фильтровать.
  • Анимация Muuri автоматически корректно взаимодействует с обеими категориями.

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

Для больших сеток рекомендуется:

  1. Использовать dragEnabled: false для всех фиксированных элементов.
  2. Минимизировать количество DOM-операций при добавлении динамических элементов.
  3. Вызывать grid.layout() только после массовых изменений, чтобы избежать лишних перерисовок.

Применение в реальных проектах

Фиксированные и динамические элементы особенно полезны в интерфейсах типа панелей управления, дашбордов, галерей и каталогов:

  • Карточки с важной информацией можно сделать фиксированными.
  • Остальные карточки, фильтруемые пользователем, остаются динамическими.
  • При изменении данных или сортировке динамических элементов фиксированные блоки не смещаются, обеспечивая стабильность интерфейса.

Итоговая структура кода для смешанных элементов

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

grid.add(document.querySelectorAll('.fixed-item'), { dragEnabled: false });
grid.add(document.querySelectorAll('.dynamic-item'));

grid.on('dragReleaseEnd', () => grid.layout());
  • Использование событий dragReleaseEnd помогает синхронизировать динамическую перестройку сетки после завершения перетаскивания.
  • Фиксированные элементы остаются стабильными, динамические реагируют на действия пользователя.

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

Оглавление