Группировка элементов

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

Инициализация сетки с группами

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

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

Каждый элемент сетки может содержать атрибут data-group или любой другой пользовательский атрибут, который будет служить ключом для группировки:

<div class="item" data-group="fruits">Яблоко</div>
<div class="item" data-group="fruits">Банан</div>
<div class="item" data-group="vegetables">Морковь</div>
<div class="item" data-group="vegetables">Брокколи</div>

Фильтрация и отображение групп

Фильтрация элементов по группам осуществляется через метод filter(). Он принимает функцию или строку-селектор:

grid.filter((item) => {
  return item.getElement().dataset.group === 'fruits';
});

Здесь item.getElement() возвращает HTML-элемент сетки, а dataset.group извлекает значение атрибута data-group. Метод filter динамически скрывает элементы, не удовлетворяющие условию, и автоматически перераспределяет оставшиеся.

Можно использовать множественную фильтрацию, объединяя группы:

grid.filter((item) => {
  const group = item.getElement().dataset.group;
  return group === 'fruits' || group === 'vegetables';
});

Сортировка внутри групп

Muuri позволяет сортировать элементы как глобально, так и внутри групп. Для сортировки используется метод sort() с функцией сравнения:

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

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

const fruits = grid.getItems().filter(item => item.getElement().dataset.group === 'fruits');
fruits.sort((a, b) => a.getElement().textContent.length - b.getElement().textContent.length);
grid.refreshItems();
grid.layout(true);

Динамическое изменение групп

Группы можно изменять в процессе работы интерфейса, что позволяет реализовать интерактивные фильтры и перемещение элементов между категориями:

const item = grid.getItems()[0];
item.getElement().dataset.group = 'vegetables';
grid.refreshItems([item]);
grid.layout();

refreshItems обновляет внутренние данные сетки для измененного элемента, а layout пересчитывает расположение всех элементов.

Анимация при фильтрации и группировке

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

grid.layout(true); // пересчет с анимацией

Можно задавать параметры анимации при инициализации:

const grid = new Muuri('.grid', {
  layout: {
    duration: 400,
    easing: 'ease-in-out'
  }
});

Группировка и drag-and-drop

Muuri позволяет объединять функционал drag-and-drop с группировкой. Для этого важно правильно обновлять атрибуты элементов при перемещении:

grid.on('move', (data) => {
  const item = data.item;
  const newGroup = item.getElement().dataset.group;
  console.log(`Элемент перемещен в группу ${newGroup}`);
});

Это позволяет реализовать динамическое изменение категорий через перетаскивание элементов между группами.

Вывод групповой структуры

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

const groups = {};
grid.getItems().forEach(item => {
  const group = item.getElement().dataset.group;
  if (!groups[group]) groups[group] = [];
  groups[group].push(item);
});
console.log(groups);

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

Резюме ключевых методов для работы с группами

  • filter(fn) — фильтрует элементы по заданной функции.
  • sort(fn) — сортирует элементы внутри сетки или группы.
  • refreshItems(items) — обновляет данные сетки после изменения атрибутов.
  • layout(animate) — пересчитывает позиционирование элементов с анимацией или без.
  • getItems() — получает массив всех элементов сетки.
  • getElement() — возвращает DOM-элемент конкретного элемента Muuri.

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

Оглавление