Методы экземпляра Grid

В библиотеке Muuri центральным объектом является Grid. Экземпляр Grid создаётся через конструктор:

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

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

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

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

add(items, options)

Метод добавляет новые элементы в сетку. items могут быть DOM-узлами или массивом узлов. Опции позволяют указать, где вставлять элементы и как их анимировать:

grid.add([newItem1, newItem2], { index: 0, layout: 'instant' });
  • index — позиция вставки.
  • layout — способ перестройки сетки ('instant' или 'animate').

remove(items, options)

Удаляет элементы из сетки:

grid.remove([item1, item2], { removeElements: true });
  • removeElements — если true, удаляет элементы из DOM после удаления из сетки.
  • Возвращает массив удалённых элементов.

getItems([element]) и getItem(element)

  • getItems() возвращает массив всех элементов сетки.
  • getItem(element) возвращает конкретный объект GridItem по DOM-узлу.
const item = grid.getItem(document.querySelector('.item'));

Перестройка и обновление сетки

layout([instant])

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

grid.layout(); // с анимацией
grid.layout(true); // без анимации
  • instant — если true, перестройка происходит мгновенно без анимации.
  • Автоматически пересчитывает позиции и размеры элементов.

refreshItems()

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

grid.refreshItems().layout();
  • Важно: без вызова layout изменения не будут визуально применены.

refreshSortData()

Обновляет данные для сортировки, если они зависят от содержимого элементов:

grid.refreshSortData().sort('name');
  • Необходим при динамических изменениях текста или атрибутов элементов.

Сортировка и фильтрация

sort(criteria, options)

Сортирует элементы сетки. criteria может быть строкой (имя поля) или функцией сравнения:

grid.sort((a, b) => a.getElement().dataset.order - b.getElement().dataset.order);

  • options:

    • layout: 'instant' или 'animate'
    • descending: true/false для обратного порядка

filter(filterFunction, options)

Фильтрует элементы сетки:

grid.filter(item => item.getElement().dataset.category === 'books');
  • Элементы, не соответствующие фильтру, временно скрываются.
  • options аналогичны методу sort.

Управление размерами и положением элементов

show(items, options) / hide(items, options)

Методы управления видимостью элементов:

grid.hide(itemsToHide, { layout: 'instant' });
grid.show(itemsToShow, { layout: 'animate' });
  • Принимают массив GridItem или DOM-узлов.
  • Позволяют интегрировать анимацию с фильтрацией и сортировкой.

move(item, index, options)

Перемещает элемент в новую позицию:

grid.move(item, 2, { layout: 'animate' });
  • index — новая позиция в сетке.
  • Позволяет создавать динамические перестановки без полной пересборки.

События экземпляра Grid

Grid поддерживает подписку на события через on и off:

grid.on('dragStart', (item) => console.log('Начало перетаскивания', item));
grid.on('layoutEnd', () => console.log('Перестройка завершена'));

  • Основные события:

    • layoutStart / layoutEnd — перестройка сетки
    • dragStart / dragEnd — начало и конец перетаскивания
    • filter / sort — после фильтрации и сортировки

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

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

При добавлении новых элементов и их последующей фильтрации/сортировке важно соблюдать последовательность методов:

grid.add([newItem])
    .refreshItems()
    .layout();

Для удаления:

grid.remove([itemToRemove], { removeElements: true })
    .layout();

Эта последовательность гарантирует корректное обновление размеров, позиций и визуальную анимацию.

Интерактивность и перетаскивание

enableDrag() / disableDrag()

Управляет возможностью перетаскивания:

grid.enableDrag();
grid.disableDrag();
  • Позволяет временно блокировать или включать интерактивность элементов.
  • При включённом dragEnabled: true перетаскивание интегрируется с фильтрацией и сортировкой без конфликтов.

moveElement(element, x, y)

Позволяет программно изменять позицию отдельного элемента, не вызывая полной перестройки:

grid.getItem(element).move(x, y);
  • Используется для кастомных анимаций и динамических интерфейсов.

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

Оглавление