Контроль порядка элементов

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

Инициализация сетки с возможностью сортировки

Сетку создают через конструктор Muuri(container, options). Для контроля порядка важно понимать следующие параметры:

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

Сортировка элементов может выполняться через метод sort, принимающий функцию сравнения или ключ.

grid.sort((itemA, itemB) => {
  return itemA.getElement().dataset.order - itemB.getElement().dataset.order;
});

В этом примере порядок элементов задается через атрибут data-order.

Методы контроля позиции элементов

Muuri предоставляет методы для точного управления:

  • move(item, toIndex, [options]) – перемещает элемент на указанную позицию.

    const firstItem = grid.getItems()[0];
grid.move(firstItem, 5, { layout: { duration: 400, easing: 'ease' } });

  • swap(itemA, itemB, [options]) – меняет местами два элемента.

    const items = grid.getItems();
grid.swap(items[0], items[1], { layout: { duration: 300 } });

  • send(item, toGrid, [options]) – перемещает элемент между разными сетками.

Эти методы автоматически вызывают перерасчет расположения (layout) и применяют анимацию для плавного перехода.

Сортировка по произвольным критериям

Muuri поддерживает сортировку не только по числовым или строковым атрибутам, но и по функциям:

grid.sort((itemA, itemB) => {
  const nameA = itemA.getElement().querySelector('.name').textContent.toLowerCase();
  const nameB = itemB.getElement().querySelector('.name').textContent.toLowerCase();
  return nameA.localeCompare(nameB);
});

Сортировка может быть стабильной, что важно при работе с фильтрацией и динамическими добавлениями элементов.

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

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

grid.on('move', (items) => {
  items.forEach(item => {
    console.log('Новый индекс:', grid.getItems().indexOf(item));
  });
});

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

Сочетание сортировки и фильтрации

Muuri позволяет комбинировать сортировку и фильтрацию, сохраняя контроль над порядком элементов:

grid.filter(item => item.getElement().classList.contains('active'));
grid.sort((a, b) => a.getElement().dataset.rank - b.getElement().dataset.rank);

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

Управление порядком при добавлении и удалении элементов

  • Добавление:

    const newItem = grid.add([document.createElement('div')], { layout: true });

    Можно сразу указать layout: true для плавного включения элемента в сетку.

  • Удаление:

    const item = grid.getItems()[2];
grid.remove(item, { removeElements: true, layout: { duration: 300 } });

Удаление элементов корректно обновляет индексы остальных элементов, сохраняя согласованность порядка.

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

Параметры анимации задаются через объект layout:

grid.layout({
  duration: 500,
  easing: 'ease-in-out',
  queue: false
});
  • duration – время анимации в миллисекундах.
  • easing – функция сглаживания движения.
  • queue – позволяет выполнять анимацию последовательно или одновременно для всех элементов.

Сохранение пользовательского порядка

Для реализации «drag-and-drop» с запоминанием порядка можно сохранять индексы:

grid.on('move', (items) => {
  const order = grid.getItems().map(item => item.getElement().dataset.id);
  localStorage.setItem('gridOrder', JSON.stringify(order));
});

При загрузке страницы порядок восстанавливается через метод sort с сохраненными значениями.

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

Оглавление