Вставка в определенную позицию

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

Методы вставки

Для управления вставкой элементов используются методы add(), addAt() и move(), каждый из которых имеет свои особенности.

add(items, options) — добавляет один или несколько элементов в сетку. По умолчанию элементы добавляются в конец коллекции, однако можно указать параметры анимации и layout:

grid.add([element], { layout: 'instant', index: 0 });

Здесь параметр index позволяет вставить элемент на определённую позицию в коллекции. Если index не указан, элемент окажется в конце.

addAt(item, index, options) — прямой метод для вставки элемента на конкретную позицию:

grid.addAt(element, 2, { layout: 'instant' });

В этом примере элемент будет вставлен на третью позицию (индексация начинается с нуля). После вставки автоматически вызывается layout, если не указано иное.

move(item, toIndex, options) — используется для перемещения уже существующего элемента внутри сетки. Позволяет менять порядок элементов динамически:

grid.move(item, 0, { layout: 'swap', instant: false });

Параметр layout может быть 'swap' (обмен позициями), 'instant' (мгновенное изменение) или 'fade' (плавное исчезновение и появление). Это даёт полное управление визуальной анимацией при перестановке.

Использование индексов и ключей

Элементы в сетке имеют внутренний индекс, который можно использовать для точной вставки. Помимо числового индекса, можно применять кастомные ключи через опцию id:

const element = document.createElement('div');
element.dataset.id = 'unique-element';
grid.add(element, { index: 1 });

При необходимости перемещения элемента по ключу можно использовать:

const item = grid.getItems().find(i => i.getElement().dataset.id === 'unique-element');
grid.move(item, 0);

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

Анимация при вставке

Muuri позволяет гибко управлять анимацией при добавлении элементов. Основные параметры:

  • layout — тип анимации для перестроения сетки ('instant', 'fade', 'swap', 'default').
  • instant — если true, вставка происходит мгновенно без анимации.
  • duration — время анимации в миллисекундах.
  • easing — функция плавности анимации ('ease', 'linear', 'ease-in-out').

Пример вставки с плавной анимацией:

grid.add(element, { index: 1, layout: { duration: 400, easing: 'ease-in-out' } });

Вставка нескольких элементов

Добавление нескольких элементов одновременно улучшает производительность и сохраняет анимацию целостной:

const elements = [el1, el2, el3];
grid.add(elements, { index: 2, layout: { duration: 300, easing: 'ease' } });

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

Практическое применение

Вставка в определённую позицию полезна в следующих сценариях:

  • Сортировка элементов по пользовательскому выбору.
  • Добавление новых карточек в ленту новостей на конкретную позицию.
  • Реализация drag-and-drop с сохранением порядка.
  • Динамическая генерация сетки на основе данных сервера с контролем приоритетов.

Советы по оптимизации

  • Для вставки большого числа элементов лучше использовать один вызов add() с массивом, чтобы избежать многократного пересчёта layout.
  • Если элементы имеют различную высоту и ширину, рекомендуется использовать layout: 'instant', а затем вызвать глобальный grid.layout() после вставки всех элементов, чтобы минимизировать мерцания.
  • Использование getItems() и фильтрации по dataset позволяет безопасно вставлять и перемещать элементы даже в динамических коллекциях.

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

Оглавление