Создание элементов программно

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

Инициализация сетки

Перед добавлением элементов программно необходимо создать объект сетки:

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

.grid — контейнер сетки в DOM.
dragEnabled — включает возможность перетаскивания элементов.
layout.fillGaps — позволяет автоматически заполнять пустые места при удалении элементов.

Создание элемента в DOM

Для добавления элемента в сетку необходимо сначала создать его в DOM:

function createGridItem(content) {
  const item = document.createElement('div');
  item.classList.add('item');

  const inner = document.createElement('div');
  inner.classList.add('item-content');
  inner.textContent = content;

  item.appendChild(inner);
  return item;
}

.item — внешний контейнер для элемента сетки, обязательный для Muuri.
.item-content — внутренний контейнер с содержимым.

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

После создания DOM-элемента его можно добавить в сетку с помощью метода add:

const newItem = createGridItem('Новый элемент');
grid.add(newItem);
grid.layout(); // Обновление сетки

grid.add() — принимает один элемент или массив элементов.
grid.layout() — принудительно перестраивает сетку после добавления.

Добавление нескольких элементов одновременно

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

const items = [];

for (let i = 1; i <= 5; i++) {
  items.push(createGridItem(`Элемент ${i}`));
}

grid.add(items);
grid.layout();

При добавлении массива Muuri автоматически распределяет элементы в сетке с учетом текущего макета.

Настройка анимации при добавлении

Muuri поддерживает плавные анимации появления элементов:

grid.add(newItem, { layout: true, instant: false });

layout: true — обновляет расположение сетки после добавления.
instant: false — позволяет применить анимацию, элементы не появляются мгновенно.

Можно настроить скорость и эффект анимации через CSS:

.item {
  transition: transform 0.4s, opacity 0.4s;
  opacity: 0;
}

.item.muuri-item-showing {
  opacity: 1;
}

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

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

const itemToRemove = grid.getItems()[0]; // первый элемент
grid.remove(itemToRemove, { removeElements: true });
grid.layout();

grid.getItems() — возвращает все элементы сетки.
removeElements: true — удаляет элемент из DOM.

Обновление содержимого элемента

Можно менять содержимое элемента без пересоздания:

const item = grid.getItems()[0].getElement();
item.querySelector('.item-content').textContent = 'Обновлённый контент';
grid.refreshItems().layout();

refreshItems() — обновляет внутренние данные Muuri о DOM-элементах.
layout() — перестраивает сетку после изменений.

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

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

grid.on('add', (items) => {
  console.log('Добавлены элементы:', items);
});

add — срабатывает после добавления элемента в сетку.
Можно использовать для интеграции с другими компонентами интерфейса.

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

Для корректной работы сетки важно придерживаться правильной структуры:

<div class="grid">
  <div class="item">
    <div class="item-content">Содержимое</div>
  </div>
</div>

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