Система событий Muuri

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

События сетки

События сетки относятся ко всей коллекции элементов и позволяют реагировать на глобальные изменения. Ключевые события:

  • layoutStart – срабатывает перед началом перестановки элементов. Используется для инициализации анимаций или логики перед обновлением расположения.

    grid.on('layoutStart', () => {
  console.log('Начало перестановки элементов');
});

  • layoutEnd – срабатывает после завершения перестановки. Позволяет выполнять действия, когда элементы уже находятся на новых позициях.

    grid.on('layoutEnd', () => {
  console.log('Перестановка завершена');
});

  • add – возникает при добавлении новых элементов в сетку. Передает объект элемента и его индекс.

    grid.on('add', (items) => {
  console.log('Добавлены элементы:', items);
});

  • remove – событие удаления элементов. Позволяет корректно обрабатывать удаление и освобождать ресурсы.

    grid.on('remove', (items) => {
  console.log('Удалены элементы:', items);
});

  • filter – срабатывает при применении фильтра к сетке. Позволяет отслеживать, какие элементы стали видимыми.

    grid.on('filter', (items) => {
  console.log('Элементы после фильтрации:', items);
});

  • sort – возникает при сортировке элементов. Позволяет реагировать на изменение порядка.

    grid.on('sort', (items) => {
  console.log('Элементы после сортировки:', items);
});

  • dragStart, dragMove, dragEnd – события, связанные с перетаскиванием. Позволяют управлять логикой начала, движения и завершения перетаскивания элементов.

    grid.on('dragStart', (item) => {
  console.log('Начало перетаскивания элемента:', item);
});

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

Каждый элемент Muuri может генерировать свои собственные события. Основные:

  • show – элемент стал видимым после фильтрации или анимации.
  • hide – элемент скрыт.
  • move – элемент перемещается в новую позицию.
  • dragReleaseEnd – завершено отпускание элемента после перетаскивания.

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

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

Пользовательские события

Muuri поддерживает генерацию и обработку собственных событий через метод emit. Это удобно для объединения логики или передачи информации между частями приложения.

grid.emit('customEvent', { message: 'Пользовательское событие' });

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

Управление событиями

  • Подписка на событие – метод .on(eventName, callback) позволяет подключить обработчик.
  • Одноразовый обработчик – .once(eventName, callback) выполнит обработчик только один раз.
  • Отписка от события – .off(eventName, callback) удаляет обработчик.

Пример комбинации подписки и отписки:

function handleDragEnd(item) {
  console.log('Перетаскивание завершено:', item);
}

grid.on('dragEnd', handleDragEnd);
grid.off('dragEnd', handleDragEnd);

Передача данных через события

Muuri позволяет передавать объект с дополнительными данными в обработчик, что облегчает интеграцию с другими компонентами:

grid.on('layoutEnd', (items, status) => {
  console.log('Количество элементов:', items.length);
  console.log('Статус перестановки:', status);
});

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

Практические советы

  • Всегда удалять ненужные обработчики для предотвращения утечек памяти.
  • Использовать события сетки для глобальных изменений, а события элементов – для локальных эффектов.
  • Для сложной логики перетаскивания комбинировать события dragStart, dragMove и dragEnd.
  • Пользовательские события полезны для связи разных сеток или компонентов страницы.

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

Оглавление