Контекст обработчиков событий

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

События макета

Packery инициирует события каждый раз, когда происходит перестройка сетки. Основные события:

  • layoutComplete — срабатывает после завершения раскладки элементов. Передаёт объект с информацией о позиции всех элементов.

    pckry.on('layoutComplete', function(laidOutItems) {
  console.log('Элементы выложены:', laidOutItems);
});

  • removeComplete — вызывается после успешного удаления элемента из сетки. Предоставляет доступ к удалённым элементам.

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

  • fitComplete — активируется после того, как элемент “встроен” в сетку с использованием метода fit.

    pckry.on('fitComplete', function(item) {
  console.log('Элемент встроен:', item);
});

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

События перетаскивания

Packery тесно интегрирован с библиотекой Draggabilly и встроенным drag-and-drop API, поэтому перетаскивание элементов сопровождается собственными событиями:

  • dragStart — срабатывает в момент начала перетаскивания элемента. Позволяет изменять стиль, создавать эффект “подсветки” или блокировать определённые элементы.

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

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

    pckry.on('dragMove', function(item, event) {
  console.log('Перемещение:', item.position);
});

  • dragEnd — активируется при завершении перетаскивания. На этом этапе можно проверить, попал ли элемент в допустимую зону, и выполнить необходимые корректировки макета.

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

Добавление и удаление элементов

Packery поддерживает динамическое управление элементами сетки через методы appended и remove:

  • appended — добавляет новые элементы в сетку и инициирует события layoutComplete для перерасчёта позиций.

    var newItem = document.createElement('div');
newItem.className = 'grid-item';
grid.appendChild(newItem);
pckry.appended(newItem);

  • remove — удаляет элементы из сетки и инициирует событие removeComplete.

    var item = pckry.getItem(document.querySelector('.grid-item'));
pckry.remove(item.element);
pckry.layout();

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

Кастомные события

Packery поддерживает привязку пользовательских событий через стандартный метод .on() на экземпляре объекта. Это позволяет реализовать собственные сценарии, например:

  • Отслеживание двойного клика на элементе для его выделения.
  • Запуск функции при достижении определённой позиции элемента после перестановки.
  • Реализация интеграции с внешними библиотеками визуализации, обновляющими элементы сетки.

Пример кастомного события:

grid.addEventListener('dblclick', function(event) {
  if (event.target.classList.contains('grid-item')) {
    console.log('Двойной клик по элементу:', event.target);
  }
});

Синхронизация с другими событиями DOM

Packery не изолирует события сетки от стандартных событий DOM. Элементы сетки могут реагировать на click, mouseover, mouseout, touchstart и другие события, что позволяет комбинировать функциональность Packery с интерактивными интерфейсами. Важно учитывать порядок обработки событий: события Packery обычно инициируются после изменений DOM, поэтому привязка стандартных обработчиков лучше выполняется до или после вызова методов Packery.

Рекомендации по работе с обработчиками

  • Использовать .on() для подписки на события вместо прямого назначения element.onclick, чтобы не нарушить работу Packery.
  • При большом количестве элементов рекомендуется делегирование событий через родительский контейнер для оптимизации производительности.
  • Для динамически добавляемых элементов всегда инициировать события Packery через appended перед подпиской на кастомные события.
  • Обновление макета лучше выполнять после завершения всех изменений DOM для предотвращения “дёрганий” элементов.

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

Packery позволяет закреплять элементы в сетке через свойство isDraggable или класс pinned. Для закреплённых элементов события перетаскивания не вызываются, но события макета (layoutComplete, fitComplete) всё равно срабатывают при перестройке сетки. Это обеспечивает гибкую комбинацию статичных и динамичных элементов в одной сетке.

Оглавление