Свойства Item

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

element

Свойство element хранит ссылку на DOM-элемент, который представляет этот Item. Это стандартный HTML-узел, с которым можно напрямую работать через методы DOM. Пример использования:

let item = grid.getItems()[0];
console.log(item.element); // HTMLDivElement или другой тег контейнера
item.element.style.border = '2px solid red';

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

  • Позволяет напрямую изменять стили элемента.
  • Через element можно добавлять события и слушатели.

grid

Свойство grid содержит ссылку на объект Muuri Grid, которому принадлежит Item. Через это свойство можно получить доступ к методам сетки, например layout или filter, вызывая их относительно конкретного элемента.

let gridInstance = item.grid;
gridInstance.layout(); // Перестраивает сетку, включая этот элемент

id

Каждому Item автоматически присваивается уникальный идентификатор id. Он нужен для внутреннего контроля и может использоваться для поиска элемента в массиве сетки.

console.log(item.id); // например, 5

isActive

Свойство isActive отражает текущую активность Item. Активный элемент виден в сетке и участвует в фильтрации и сортировке. При установке isActive = false элемент скрывается, но не удаляется из DOM.

item.isActive = false; // Элемент скрыт из сетки
console.log(item.isActive); // false

Важно: Для отображения скрытых элементов необходимо использовать метод show или установить isActive = true.

isVisible

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

if (!item.isVisible) {
    console.log("Элемент скрыт фильтром");
}

isDragging

Флаг isDragging указывает, что элемент в данный момент перетаскивается пользователем. Это свойство полезно для динамической настройки стилей и взаимодействия с другими элементами сетки.

if (item.isDragging) {
    item.element.style.opacity = 0.5;
}

isPositioning

Свойство isPositioning показывает, что элемент в процессе анимации своего перемещения внутри сетки. Когда элемент меняет позицию, Muuri использует CSS-трансформации, и isPositioning становится true до завершения анимации.

item.on('move', () => {
    if (item.isPositioning) console.log("Элемент двигается");
});

width и height

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

console.log(`Ширина: ${item.width}, Высота: ${item.height}`);

x и y

Координаты x и y отражают текущее положение элемента относительно контейнера сетки. Значения используются для анимации и вычисления новых позиций при перестроении.

console.log(item.x, item.y);
item.setPosition(100, 200); // Перемещение элемента в координаты (100, 200)

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

  • Значения автоматически корректируются при вызове grid.layout().
  • Можно использовать вместе с CSS-анимациями для плавного перемещения.

getElement

Метод getElement() возвращает тот же DOM-элемент, что и element, но через интерфейс Item. Полезен при работе с методами, которые возвращают объекты Item без прямого доступа к DOM.

let domNode = item.getElement();

show() и hide()

Методы show и hide управляют видимостью элемента. Они изменяют свойства isActive и инициируют анимацию появления или скрытия.

item.hide(); // Скрытие с анимацией
item.show(); // Появление с анимацией

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

  • Можно передавать параметры анимации.
  • Работает корректно с фильтрацией и сортировкой.

remove() и destroy()

  • remove() — удаляет элемент из сетки, оставляя DOM на месте, если передан параметр true.
  • destroy() — полностью удаляет элемент из сетки и из DOM, очищая все слушатели и внутренние данные.
item.remove(true); // Удаляет из сетки, оставляет DOM
item.destroy(); // Полное удаление

refreshDimensions()

Метод refreshDimensions() пересчитывает размеры элемента, что важно при изменении контента внутри Item.

item.refreshDimensions();

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

  • Рекомендуется вызывать после динамического изменения содержимого.
  • Обновляет свойства width и height.

on и off для событий

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

  • move — элемент перемещается.
  • dragStart, dragEnd — начало и конец перетаскивания.
  • show, hide — элемент появляется или скрывается.
item.on('dragEnd', () => console.log('Перетаскивание завершено'));
item.off('dragEnd');

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

Итог

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

Оглавление