События layout

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

События layout делятся на две основные категории: события, связанные с началом процесса компоновки, и события, информирующие о его завершении.

Основные события layout

  1. layoutStart Срабатывает в момент начала перестановки элементов в сетке. На этом этапе Muuri вычисляет новые позиции элементов, но фактическая анимация ещё не запущена. Пример использования:

    grid.on('layoutStart', function (items) {
  console.log('Начало компоновки', items);
});

    Параметры:

    • items – массив элементов, которые участвуют в текущей перестановке.

  2. layoutEnd Срабатывает после того, как все элементы завершили анимацию и заняли новые позиции. Это событие удобно использовать для выполнения действий после визуального завершения перестановки. Пример:

    grid.on('layoutEnd', function (items) {
  console.log('Компоновка завершена', items);
});

    Параметры:

    • items – массив элементов, которые были перемещены или переставлены.

Работа с событиями отдельных элементов

Каждый элемент Muuri (grid.getItems()) также генерирует события компоновки, которые позволяют реагировать на изменения позиции конкретного элемента.

  • move — срабатывает, когда элемент перемещается в процессе компоновки.

    item.getElement().addEventListener('move', function (event) {
  console.log('Элемент перемещается', event);
});

  • layout — срабатывает после того, как элемент завершил анимацию и занял новое положение.

    item.getElement().addEventListener('layout', function () {
  console.log('Элемент занял новое место');
});

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

Параметры и объект события

Muuri передаёт в обработчики события layout массив элементов и объект с дополнительной информацией:

grid.on('layoutEnd', function (items, event) {
  console.log('Items:', items);
  console.log('Layout event info:', event);
});

Возможные свойства объекта события:

  • action — действие, вызвавшее перестановку (move, add, remove, filter, sort и т.д.).
  • trigger — инициатор события (manual для ручного вызова, auto для автоматической перестановки).
  • items — элементы, которые были перемещены.

Практическое использование

События layout позволяют строить сложные интерактивные сценарии, например:

  1. Отслеживание завершения сортировки При сортировке элементов можно запускать дополнительные функции после того, как все элементы заняли новые позиции:

    grid.sort('data-order');
grid.on('layoutEnd', function (items) {
  highlightNewItems(items);
});

  2. Интеграция с анимациями CSS Можно добавлять классы для анимации только после завершения компоновки:

    grid.on('layoutEnd', function (items) {
  items.forEach(item => {
    item.getElement().classList.add('animation-complete');
  });
});

  3. Динамическое подгружение контента После перестановки элементов можно загружать дополнительный контент в элементы, которые заняли новые позиции, что особенно актуально для сеток с ленивой загрузкой изображений.

Отличие событий layout от dragReleaseEnd

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

Событие dragReleaseEnd срабатывает исключительно после завершения перетаскивания элемента пользователем. Таким образом, для отслеживания визуальных перестановок всей сетки лучше использовать layoutStart и layoutEnd, а для индивидуального контроля над драгом — dragReleaseEnd.

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

  • Не нагружать обработчики события layoutEnd тяжёлыми вычислениями, так как это может замедлить визуальную реакцию сетки.
  • Использовать события layoutStart для подготовки элементов к анимации (например, добавление временных классов).
  • Для сложных сеток с большим количеством элементов рекомендуется фильтровать массив items внутри обработчика, чтобы обрабатывать только нужные элементы.

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

Оглавление