Методы Item

В библиотеке Muuri каждый элемент сетки представлен объектом Item. Этот объект является абстракцией, которая позволяет управлять элементами независимо от их положения в DOM. Объект Item создаётся автоматически при инициализации сетки, но также может быть создан вручную при динамическом добавлении элементов через метод add().

Пример создания Item через добавление элемента в сетку:

const grid = new Muuri('.grid');
const element = document.createElement('div');
element.classList.add('item');
grid.add(element);

После добавления элемент автоматически превращается в объект Item, к которому можно применять методы управления.

Методы позиционирования

Item предоставляет набор методов для контроля позиции и размеров элементов в сетке.

  • getPosition() — возвращает текущие координаты элемента в сетке в виде объекта {x, y}.
const pos = item.getPosition();
console.log(pos.x, pos.y);
  • move(x, y, [options]) — перемещает элемент к указанной позиции относительно сетки. Параметр options позволяет настроить анимацию:
item.move(100, 200, { duration: 400, easing: 'ease-in-out' });
  • hide([options]) и show([options]) — управляют видимостью элемента с плавной анимацией.
item.hide({ duration: 300 });
item.show({ duration: 300 });
  • getWidth() и getHeight() — возвращают текущую ширину и высоту элемента, учитывая все применённые стили и трансформации.

Методы сортировки и фильтрации

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

  • filter(predicate) — используется сеткой для определения видимости элемента. Функция predicate принимает объект Item и возвращает true или false.
  • sortWeight(weight) — задаёт числовой вес элемента, который используется при сортировке.

Пример сортировки элементов по весу:

grid.sort((a, b) => a.getSortData('weight') - b.getSortData('weight'));

Методы управления DOM и контентом

Item предоставляет доступ к самому DOM-элементу и его содержимому:

  • getElement() — возвращает DOM-элемент, связанный с Item.
const el = item.getElement();
el.style.border = '1px solid red';

  • updateContent() — обновляет содержимое элемента после изменения DOM, чтобы Muuri корректно пересчитал размеры и позиции.

  • addClass(className) и removeClass(className) — позволяют динамически добавлять и удалять CSS-классы с элемента Item.

  • hasClass(className) — проверяет наличие определённого CSS-класса на элементе.

Методы динамического изменения размеров

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

  • resize([width, height, options]) — изменяет размеры элемента с возможностью анимации.
item.resize(200, 150, { duration: 300 });
  • refreshDimensions() — пересчитывает текущие размеры элемента на основе его DOM-стиля. Это важно после изменения контента или CSS.

Методы управления событиями

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

  • on(event, callback) — подписка на событие.
  • off(event, callback) — удаление подписки.

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

  • move — элемент перемещается;
  • show / hide — элемент показан или скрыт;
  • dragStart / dragEnd — начало и завершение перетаскивания;
  • destroy — элемент удаляется из сетки.

Пример подписки на событие перетаскивания:

item.on('dragEnd', () => {
  console.log('Элемент перетаскивание завершено');
});

Методы удаления и очистки

  • remove([options]) — удаляет элемент из сетки и из DOM. Опция options позволяет анимировать процесс удаления.
item.remove({ removeElements: true, duration: 400 });
  • destroy([options]) — полностью уничтожает объект Item, снимая все события и связи с DOM. Этот метод полезен для полной очистки памяти при динамическом удалении элементов.

Методы работы с Drag & Drop

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

  • isDragging() — возвращает true, если элемент в данный момент перетаскивается.
  • getDragData() — возвращает данные о текущем состоянии перетаскивания, включая координаты и начальные позиции.

Эти методы позволяют интегрировать Item с внешними системами drag-and-drop и выполнять кастомное управление элементами сетки.

Методы взаимодействия с сеткой

Item тесно интегрирован с родительской сеткой. Ключевые методы взаимодействия:

  • getGrid() — возвращает объект сетки, к которой принадлежит элемент.
  • isActive() — проверяет, активен ли элемент (не скрыт и не удалён).
  • isVisible() — возвращает true, если элемент в данный момент отображается и проходит фильтр.

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

Оглавление