Свойства элемента

Элементы (items) являются базовыми единицами сетки Muuri. Каждый элемент представляет собой объект, связанный с DOM-узлом, который участвует в компоновке, сортировке, фильтрации и перетаскивании. Библиотека автоматически создаёт объект элемента при инициализации сетки и сохраняет ссылку на него внутри экземпляра Grid.

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

Объект Item

Каждый элемент Muuri представлен экземпляром внутреннего класса Item. Доступ к нему обычно осуществляется через методы сетки:

const grid = new Muuri('.grid');
const items = grid.getItems();

Каждый элемент массива items — это объект Item, содержащий набор свойств и методов.

Пример получения первого элемента:

const item = grid.getItems()[0];

Через этот объект доступны свойства, описывающие состояние элемента.

Основные свойства элемента

_id

Уникальный идентификатор элемента внутри сетки.

item._id

Особенности:

  • генерируется автоматически при создании элемента
  • используется Muuri для внутренней идентификации
  • не должен изменяться вручную

Пример значения:

23

Это значение уникально в пределах конкретной сетки.

_grid

Ссылка на экземпляр сетки, к которой принадлежит элемент.

item._grid

Содержит объект Muuri.

Пример использования:

const grid = item._grid;

Позволяет получить доступ к методам сетки напрямую из элемента.

_element

DOM-элемент, связанный с объектом Item.

item._element

Тип:

HTMLElement

Пример:

const element = item._element;
element.style.background = 'red';

Свойство обеспечивает прямую связь между объектом Muuri и DOM-структурой.

_isActive

Флаг активности элемента.

item._isActive

Тип:

Boolean

Значения:

  • true — элемент участвует в компоновке
  • false — элемент исключён из сетки

Пример:

if (item._isActive) {
  console.log('Элемент активен');
}

Неактивные элементы не участвуют в расчёте расположения.

_isVisible

Определяет видимость элемента.

item._isVisible

Тип:

Boolean

Состояния:

  • true — элемент отображается
  • false — элемент скрыт

Скрытые элементы не участвуют в компоновке.

Видимость изменяется через методы:

grid.show(item);
grid.hide(item);

_isPositioning

Показывает, выполняется ли анимация перемещения элемента.

item._isPositioning

Тип:

Boolean

Значения:

  • true — элемент перемещается
  • false — элемент находится в статическом положении

Это свойство полезно для отслеживания состояния анимации.

_left

Горизонтальная позиция элемента внутри сетки.

item._left

Тип:

Number

Значение указывается в пикселях.

Пример:

120

Это означает, что элемент расположен на 120px от левого края контейнера.

_top

Вертикальная позиция элемента.

item._top

Тип:

Number

Пример:

80

Означает позицию в 80px от верхней границы контейнера.

_width

Ширина элемента.

item._width

Тип:

Number

Пример:

300

Значение рассчитывается Muuri на основе размеров DOM-элемента.

_height

Высота элемента.

item._height

Тип:

Number

Пример:

200

Используется алгоритмом компоновки при вычислении позиции.

Свойства состояния перетаскивания

Muuri содержит систему drag-and-drop, которая использует несколько внутренних свойств элемента.

_drag

Объект, содержащий состояние перетаскивания.

item._drag

Тип:

Object

Содержит данные:

  • текущее положение курсора
  • координаты элемента
  • состояние перетаскивания
  • параметры анимации

Это внутренний объект библиотеки.

_isDragging

Флаг активного перетаскивания.

item._isDragging

Тип:

Boolean

Значения:

  • true — элемент в процессе drag-операции
  • false — перетаскивание не выполняется

Пример проверки:

if (item._isDragging) {
  console.log('Элемент перетаскивается');
}

_dragRelease

Объект, отвечающий за анимацию отпускания элемента после drag-операции.

item._dragRelease

Тип:

Object

Используется для:

  • возврата элемента на позицию
  • плавной анимации после перетаскивания

Свойства сортировки

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

_sortData

Объект с данными сортировки.

item._sortData

Тип:

Object

Пример структуры:

{
  title: "Article",
  date: 2024,
  rating: 5
}

Эти данные используются при вызове:

grid.sort('title');

Или:

grid.sort((a, b) => {
  return a._sortData.rating - b._sortData.rating;
});

Свойства компоновки

Muuri применяет алгоритм размещения элементов в сетке. Для этого используются свойства компоновки.

_layout

Объект текущего layout-состояния элемента.

item._layout

Тип:

Object

Содержит:

  • координаты
  • размеры
  • состояние размещения

Этот объект используется алгоритмом позиционирования.

_margin

Отступы элемента.

item._margin

Тип:

Object

Структура:

{
  left: 10,
  right: 10,
  top: 10,
  bottom: 10
}

Muuri учитывает эти значения при вычислении позиции.

Свойства видимости и фильтрации

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

_isHidden

Флаг скрытого состояния.

item._isHidden

Тип:

Boolean

Значения:

  • true — элемент скрыт
  • false — отображается

Пример фильтрации:

grid.filter(item => {
  return item._element.dataset.category === 'news';
});

_visibility

Объект управления видимостью.

item._visibility

Тип:

Object

Содержит параметры:

  • анимации появления
  • анимации скрытия
  • состояние переходов

Получение свойств элемента

Получение свойств выполняется через объект Item.

Пример:

const item = grid.getItems()[0];

console.log(item._width);
console.log(item._height);
console.log(item._left);
console.log(item._top);

Результат:

320
240
100
60

Пример анализа состояния элементов

Пример обхода всех элементов сетки:

grid.getItems().forEach(item => {
  console.log({
    id: item._id,
    active: item._isActive,
    visible: item._isVisible,
    x: item._left,
    y: item._top,
    width: item._width,
    height: item._height
  });
});

Вывод:

{
 id: 1,
 active: true,
 visible: true,
 x: 0,
 y: 0,
 width: 300,
 height: 200
}

Важное замечание о внутренних свойствах

Большинство свойств элемента Muuri имеют префикс _, что указывает на их внутренний характер.

Это означает:

  • они предназначены для внутренней логики библиотеки
  • их изменение может нарушить работу сетки
  • рекомендуется использовать публичные методы Muuri

Например:

grid.show()
grid.hide()
grid.sort()
grid.move()
grid.remove()

Эти методы безопасно изменяют состояние элементов, не нарушая внутреннюю структуру данных библиотеки.

Связь свойств с DOM

Muuri синхронизирует свойства элемента с DOM-узлом.

Например:

item._left  → CSS transform: translateX
item._top   → CSS transform: translateY

Фактическое позиционирование элемента реализуется через CSS-transform:

transform: translate(120px, 80px);

Это обеспечивает:

  • высокую производительность
  • плавную анимацию
  • отсутствие перерасчёта layout браузера

Диагностика элементов сетки

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

Пример:

const items = grid.getItems();

items.forEach(item => {
  if (!item._isVisible) {
    console.log('Скрытый элемент:', item._id);
  }
});

Это полезно при:

  • сложной фильтрации
  • динамической загрузке элементов
  • отладке drag-and-drop

Структура объекта Item

Упрощённая схема объекта:

Item
 ├── _id
 ├── _grid
 ├── _element
 ├── _isActive
 ├── _isVisible
 ├── _isHidden
 ├── _left
 ├── _top
 ├── _width
 ├── _height
 ├── _margin
 ├── _layout
 ├── _sortData
 ├── _drag
 ├── _dragRelease
 └── _visibility

Каждое из этих свойств участвует в работе одного из механизмов Muuri:

  • компоновка
  • сортировка
  • фильтрация
  • анимации
  • drag-and-drop
  • управление DOM.
Оглавление