dragItemPositioned

Метод dragItemPositioned является ключевым событием в библиотеке Packery, отвечающим за отслеживание завершения перемещения элемента в сетке. Он вызывается каждый раз, когда пользователь перетаскивает элемент с помощью Draggabilly или любого другого совместимого плагина, и элемент занимает новую позицию.

Синтаксис

packeryInstance.on('dragItemPositioned', function( draggedItem ) {
    // действия с draggedItem
});

Параметры:

  • draggedItem – объект Packery.Item, представляющий элемент сетки, который был перемещен. Через него можно получить DOM-элемент и текущие координаты позиции.

Основные свойства draggedItem

  1. element – DOM-элемент, который был перемещен.
  2. x, y – текущие координаты элемента после размещения.
  3. rect – объект с размерами и положением элемента: {x, y, width, height}.
  4. isPlacing – логическое значение, показывающее, находится ли элемент в процессе “размещения” внутри сетки.

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

packeryInstance.on('dragItemPositioned', function(item) {
    console.log('Элемент перемещён в координаты:', item.x, item.y);
});

Использование для динамических изменений

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

packeryInstance.on('dragItemPositioned', function(item) {
    const elementId = item.element.getAttribute('data-id');
    const position = { x: item.x, y: item.y };
    savePositionToServer(elementId, position);
});

Здесь savePositionToServer — функция, которая отправляет координаты элемента на сервер, обеспечивая сохранение состояния сетки.

Взаимодействие с Draggabilly

Чтобы событие корректно срабатывало, необходимо, чтобы элементы сетки были интегрированы с Draggabilly:

const draggies = [];

elements.forEach(function(el) {
    const draggie = new Draggabilly(el);
    packeryInstance.bindDraggabillyEvents(draggie);
    draggies.push(draggie);
});

После этого перемещение любого элемента автоматически вызывает событие dragItemPositioned, и можно отслеживать его положение.

Советы по производительности

  • Оптимизация работы с DOM: при большом количестве элементов не стоит выполнять тяжёлые операции внутри обработчика события. Лучше собирать данные и обрабатывать их пакетно.
  • Использование requestAnimationFrame: если обновление интерфейса связано с анимациями, оборачивайте действия в requestAnimationFrame для плавного рендеринга.
  • Фильтрация элементов: если интересуют только определённые элементы, проверяйте их через classList или dataset, прежде чем выполнять сложные операции.

Примеры практического применения

  1. Сортировка элементов по позиции:
packeryInstance.on('dragItemPositioned', function(item) {
    const items = packeryInstance.items;
    items.sort((a, b) => a.y - b.y || a.x - b.x);
    console.log('Порядок элементов после перемещения:', items.map(i => i.element.id));
});
  1. Привязка к сетке с ограничениями:
packeryInstance.on('dragItemPositioned', function(item) {
    const maxX = 500;
    if (item.x > maxX) {
        item.element.style.left = maxX + 'px';
        packeryInstance.fit(item.element);
    }
});
  1. Интеграция с анимациями:
packeryInstance.on('dragItemPositioned', function(item) {
    item.element.classList.add('moved');
    setTimeout(() => item.element.classList.remove('moved'), 300);
});

Важные моменты

  • Событие срабатывает после того, как элемент занял своё место, а не во время перетаскивания.
  • Оно тесно связано с методами fit, stamp и layout библиотеки Packery.
  • Обработчик получает объект Packery.Item, а не прямой DOM-элемент, поэтому для манипуляций с атрибутами или стилями необходимо использовать item.element.

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

Оглавление