Изменение порядка элементов

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

Переупорядочивание с помощью метода stamp и unstamp

Методы stamp и unstamp позволяют исключать определённые элементы из автоматического позиционирования:

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

var fixedItem = document.querySelector('.fixed-item');
pckry.stamp(fixedItem); // элемент фиксируется, Packery его не двигает
pckry.unstamp(fixedItem); // элемент возвращается в поток сетки
pckry.layout(); // перерасчёт расположения
  • stamp — фиксирует элемент, исключая его из алгоритма Packery.
  • unstamp — возвращает элемент в поток сетки, позволяя Packery управлять его позицией.

Использование этих методов удобно для закрепления заголовков или рекламных блоков без нарушения общей сетки.

Динамическое перемещение элементов с moveItem

Packery поддерживает метод moveItem, позволяющий программно менять позицию элементов в сетке:

var item = grid.querySelector('.grid-item:nth-child(2)');
pckry.moveItem(item, 0); // перемещаем элемент на первую позицию

Параметры метода:

  • item — DOM-элемент или элемент Packery.
  • index — новая позиция в массиве элементов.

После вызова moveItem рекомендуется вызвать layout для перерасчёта расположения:

pckry.layout();

Манипуляции с DOM и пересортировка

Packery тесно интегрируется с DOM, что позволяет использовать стандартные методы JavaScript для изменения порядка элементов. После изменения DOM необходимо обновить Packery:

var newItem = document.createElement('div');
newItem.classList.add('grid-item');
grid.appendChild(newItem);

// уведомляем Packery о новом элементе
pckry.appended(newItem);
pckry.layout();
  • appended — добавляет новый элемент в Packery и интегрирует его в текущую сетку.
  • prepended — аналогично, но элемент добавляется в начало списка.

Drag-and-Drop и изменение порядка

Packery часто используется вместе с библиотекой Draggabilly для перетаскивания элементов. Это позволяет пользователям изменять порядок элементов визуально:

var draggies = [];
var items = grid.querySelectorAll('.grid-item');

items.forEach(function(item) {
  var draggie = new Draggabilly(item);
  pckry.bindDraggabillyEvents(draggie);
  draggies.push(draggie);
});
  • bindDraggabillyEvents — связывает события перетаскивания с Packery.
  • При перемещении элемента Packery автоматически перестраивает сетку и обновляет позиции соседних элементов.

Использование перетаскивания в сочетании с методами moveItem и layout обеспечивает полный контроль над порядком элементов в реальном времени.

Обновление порядка после сортировки

Для сортировки элементов по определённому критерию (например, по дате или цене) можно использовать стандартные методы массива и затем обновлять сетку:

var itemsArray = Array.from(grid.querySelectorAll('.grid-item'));

// сортировка по data-атрибуту
itemsArray.sort(function(a, b) {
  return parseInt(a.dataset.order) - parseInt(b.dataset.order);
});

// переставляем элементы в DOM
itemsArray.forEach(function(item) {
  grid.appendChild(item);
});

// обновляем Packery
pckry.reloadItems();
pckry.layout();
  • reloadItems — пересчитывает внутренний список элементов Packery.
  • layout — перестраивает сетку после изменения порядка.

Совмещение разных методов

Для сложных макетов можно комбинировать все подходы: закрепление элементов, динамическое добавление, программное перемещение и drag-and-drop. Ключевой принцип — после любого изменения структуры DOM всегда вызывать layout, чтобы Packery пересчитал позиции.

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

Оглавление