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

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

Подписка на события элементов

Каждый элемент в сетке Muuri представляет собой объект Item. Для подписки на события используется метод .on(), который позволяет отслеживать различные типы событий.

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

grid.on('add', function(items) {
  console.log('Элементы добавлены:', items);
});

grid.on('remove', function(items) {
  console.log('Элементы удалены:', items);
});

Ключевые моменты:

  • add — вызывается при добавлении элементов в сетку.
  • remove — вызывается при удалении элементов.
  • Все события получают массив объектов Item, что позволяет работать с группой элементов одновременно.

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

Muuri предоставляет следующие основные события, связанные с элементами:

  1. add — элемент(ы) добавлены в сетку.
  2. remove — элемент(ы) удалены из сетки.
  3. show — элемент стал видимым после фильтрации или изменения стиля.
  4. hide — элемент стал скрытым.
  5. move — элемент переместился в результате сортировки, фильтрации или drag-and-drop.
  6. layoutStart — начало перестройки сетки.
  7. layoutEnd — завершение перестройки сетки.
  8. dragStart / dragMove / dragReleaseEnd / dragEnd — события, связанные с перетаскиванием элементов.

Пример подписки на несколько событий:

grid.on('show hide move', function(item) {
  console.log('Событие произошло с элементом:', item.getElement());
});

Объект Item и его методы

Объект Item — это основной интерфейс для работы с элементами сетки. Через него можно получать информацию и управлять элементами:

  • getElement() — возвращает DOM-элемент, связанный с Item.
  • show() / hide() — программно показать или скрыть элемент.
  • move() — переместить элемент в определённую позицию.
  • remove() — удалить элемент из сетки.
  • getSortData() — получить данные сортировки элемента.
  • isShown() — проверяет, видим ли элемент.
  • isDragging() — проверяет, находится ли элемент в состоянии перетаскивания.

Пример использования метода show() в обработчике события:

grid.on('hide', function(item) {
  console.log('Элемент скрыт:', item.getElement());
  // Через 2 секунды показываем элемент обратно
  setTimeout(() => item.show(), 2000);
});

Работа с drag-событиями

Muuri предоставляет подробные события, связанные с drag-and-drop, которые позволяют отслеживать весь жизненный цикл перетаскивания:

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

grid.on('dragMove', function(item, event) {
  console.log('Перетаскивание элемента:', item.getElement(), 'Позиция:', event.x, event.y);
});

grid.on('dragReleaseEnd', function(item) {
  console.log('Элемент отпущен:', item.getElement());
});

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

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

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

События фильтрации и сортировки

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

grid.filter('.active');

grid.on('show', function(item) {
  console.log('Элемент соответствует фильтру и показан:', item.getElement());
});

grid.on('hide', function(item) {
  console.log('Элемент не соответствует фильтру и скрыт:', item.getElement());
});

grid.sort('order');
grid.on('move', function(item) {
  console.log('Элемент перемещён после сортировки:', item.getElement());
});

Фильтрация может менять видимость элементов, что напрямую триггерит события show и hide. Сортировка перемещает элементы, вызывая событие move.

Удаление подписки на события

Подписка на события не является постоянной. Для удаления обработчика используется метод .off():

function onItemAdd(items) {
  console.log('Элементы добавлены:', items);
}

grid.on('add', onItemAdd);

// Позже отписываемся
grid.off('add', onItemAdd);

Если не указать конкретную функцию, .off('event') удаляет все обработчики данного события.

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

  • Использовать события add и remove для синхронизации данных с сервером или локальным хранилищем.
  • dragMove и dragEnd полезны для создания визуальных эффектов во время перемещения.
  • Комбинация show и hide позволяет динамически фильтровать элементы без полной перестройки сетки.
  • Отписка от событий важна при динамическом изменении сетки, чтобы избежать утечек памяти.

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

Оглавление