Добавление пользовательских событий

Библиотека Muuri предоставляет мощный механизм работы с пользовательскими событиями, позволяющий отслеживать и реагировать на взаимодействия с сеткой, элементами и их состояниями. Пользовательские события в Muuri можно разделить на несколько категорий: события сетки, события элементов и события перемещения (drag-and-drop).

Подключение и регистрация событий

События в Muuri регистрируются через метод .on(eventName, callback) объекта сетки. Пример базового синтаксиса:

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

grid.on('add', function (items) {
  console.log('Элементы добавлены:', items);
});
  • eventName — имя события.
  • callback — функция, которая вызывается при срабатывании события. Аргументы callback зависят от типа события.

Метод .off(eventName, callback) используется для удаления обработчиков.

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

  1. add — срабатывает при добавлении новых элементов в сетку. Аргументы: массив добавленных элементов. Позволяет сразу применить стили или анимации к новым элементам.

  2. remove — возникает при удалении элементов. Аргументы: массив удалённых элементов. Часто используется для обновления данных или синхронизации с внешними источниками.

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

  4. sort — срабатывает при сортировке элементов. Аргументы: массив отсортированных элементов. Удобно для логирования или синхронизации внешнего состояния интерфейса с положением элементов.

События элементов

Каждый элемент Muuri является объектом с собственными событиями. Для их регистрации используется метод .on на объекте элемента:

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

item.on('show', function () {
  console.log('Элемент показан');
});

item.on('hide', function () {
  console.log('Элемент скрыт');
});
  • show и hide — события изменения видимости элемента.
  • move — срабатывает при перемещении элемента внутри сетки.
  • dragStart, dragMove, dragEnd — события, связанные с перетаскиванием элемента.

Настройка пользовательских drag-событий

Muuri поддерживает систему drag-and-drop с расширенной возможностью управления:

grid.on('dragStart', function (item) {
  item.getElement().style.opacity = 0.5;
});

grid.on('dragEnd', function (item) {
  item.getElement().style.opacity = 1;
});
  • dragStart — начинается перетаскивание элемента.
  • dragMove — вызывается при каждом изменении позиции элемента во время перетаскивания.
  • dragEnd — завершается перетаскивание, можно обновить положение в данных.

Опция dragEnabled позволяет включать или отключать возможность перетаскивания:

const grid = new Muuri('.grid', {
  dragEnabled: true
});

Создание собственных пользовательских событий

Muuri позволяет создавать собственные события для сетки или элементов с помощью метода .emit(eventName, data). Пример для сетки:

grid.emit('customEvent', { message: 'Событие произошло' });

grid.on('customEvent', function (data) {
  console.log(data.message);
});

Для элементов:

const item = grid.getItems()[0];
item.emit('highlight', { color: 'red' });

item.on('highlight', function (data) {
  item.getElement().style.backgroundColor = data.color;
});

Создание пользовательских событий особенно полезно при интеграции сетки с другими библиотеками или при необходимости оповещения внешнего кода о внутренних изменениях.

Параметры обратного вызова событий

Обратные вызовы в Muuri могут получать следующие аргументы:

  • items — массив объектов элементов, для событий добавления, удаления или сортировки.
  • item — объект элемента, для событий перетаскивания или изменения состояния.
  • layout — объект с информацией о текущем расположении элементов, для событий layoutStart и layoutEnd.
  • data — пользовательские данные для кастомных событий, передаваемые через emit.

Примеры практических сценариев

  • Синхронизация с сервером: отправка состояния сетки после сортировки элементов.
  • Анимации: запуск CSS-анимаций при показе или скрытии элементов.
  • Визуальные эффекты: изменение стилей перетаскиваемого элемента в реальном времени.
  • Кастомная логика: интеграция с фильтрами и пользовательскими интерфейсными событиями.

Рекомендации по производительности

  • Использовать делегирование событий сетки вместо подписки на каждый элемент по отдельности.
  • Ограничивать частоту вызова функций в dragMove с помощью requestAnimationFrame или throttle.
  • Для пользовательских событий использовать минимальные объекты данных, чтобы не перегружать DOM.

Заключение по работе с событиями

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

Оглавление