Подписка на события

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

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

Packery поддерживает несколько типов событий, на которые можно подписаться:

layoutComplete – вызывается после завершения перестановки всех элементов сетки.
removeComplete – срабатывает после удаления элементов.
dragItemPositioned – возникает после завершения перетаскивания элемента, если включен Draggabilly или другой drag-плагин.
fitComplete – вызывается после завершения размещения элемента методом fit.
change – глобальное событие, которое сигнализирует об изменении состояния сетки.

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

Подписка на событие

Для подписки на события используется метод on. Синтаксис прост:

var pckry = new Packery('.grid', {
  itemSelector: '.grid-item',
  gutter: 10
});

pckry.on('layoutComplete', function(event, laidOutItems) {
  console.log('Сетка перестроена. Количество элементов:', laidOutItems.length);
});

Параметры колбэк-функции зависят от типа события. Например, для layoutComplete и removeComplete первым аргументом передается объект события, вторым – массив элементов, участвовавших в событии.

Отписка от событий

Packery предоставляет метод off, который позволяет отписаться от ранее зарегистрированного обработчика:

function onLayout(event, items) {
  console.log('Перестройка завершена');
}

pckry.on('layoutComplete', onLayout);

// Позже, если необходимо отключить обработчик:
pckry.off('layoutComplete', onLayout);

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

Работа с динамическими элементами

При добавлении новых элементов в сетку можно подписываться на события для каждого блока. Метод appended добавляет элементы и автоматически пересчитывает сетку:

var newItems = document.querySelectorAll('.new-item');
pckry.appended(newItems);

pckry.on('layoutComplete', function(event, laidOutItems) {
  laidOutItems.forEach(function(item) {
    console.log('Добавлен новый элемент:', item);
  });
});

Если необходимо удалять элементы, используется метод remove:

var itemToRemove = document.querySelector('.grid-item-to-remove');
pckry.remove(itemToRemove);
pckry.layout();

Событие removeComplete позволяет отследить завершение удаления:

pckry.on('removeComplete', function(event, removedItems) {
  console.log('Элементы удалены:', removedItems.length);
});

Интеграция с drag-and-drop

Packery тесно интегрируется с библиотекой Draggabilly. После того как элемент был перетащен и зафиксирован, срабатывает событие dragItemPositioned:

var draggie = new Draggabilly('.grid-item');
pckry.bindDraggabillyEvents(draggie);

pckry.on('dragItemPositioned', function(event, item) {
  console.log('Элемент перемещён:', item.element);
});

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

Цепочка событий и обработка нескольких событий

Packery позволяет подписываться на несколько событий одновременно, используя отдельные вызовы on:

pckry.on('layoutComplete', function(event, items) {
  console.log('layoutComplete', items.length);
});

pckry.on('removeComplete', function(event, items) {
  console.log('removeComplete', items.length);
});

Можно также комбинировать события с внешними библиотеками анимаций или логики бизнес-процессов, создавая цепочки реакций на действия пользователя без нарушения производительности.