Подключение jQuery UI Draggable

Библиотека Packery предназначена для создания сеток с динамическим расположением элементов, обеспечивая плотное и оптимальное заполнение пространства. Одним из ключевых преимуществ Packery является возможность перетаскивания элементов, интегрированная через jQuery UI Draggable. Подключение Draggable позволяет пользователю интерактивно менять положение блоков, а Packery автоматически перестраивает сетку.

Установка jQuery UI

Для работы Draggable требуется подключение jQuery UI, так как Packery использует его API для управления перетаскиванием. Подключение осуществляется через CDN или локальные файлы:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- jQuery UI -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

Важно подключать jQuery перед jQuery UI, иначе Draggable работать не будет.

Подключение Packery

После подключения jQuery UI необходимо подключить саму библиотеку Packery:

<script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>

Packery предоставляет объектную модель для управления сеткой, включая методы layout, shiftLayout, append и remove.

Инициализация Packery

Инициализация сетки Packery осуществляется через создание нового экземпляра:

var $grid = $('.grid').packery({
  itemSelector: '.grid-item',
  gutter: 10
});
  • itemSelector – CSS-селектор элементов сетки.
  • gutter – отступ между элементами (необязательный параметр).

Подключение Draggable к элементам

После инициализации Packery необходимо сделать элементы перетаскиваемыми с помощью jQuery UI:

$grid.find('.grid-item').each(function(i, itemElem) {
  $(itemElem).draggable({
    containment: '.grid',   // Ограничение перемещения границами сетки
    stop: function(event, ui) {
      $grid.packery('layout');  // Обновление сетки после завершения перетаскивания
    }
  });
});

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

  • containment предотвращает выход элементов за пределы контейнера.
  • stop вызывается после завершения перетаскивания, что позволяет Packery пересчитать позиции.

Интеграция Packery с Draggable через Packery’s Draggabilly (опционально)

Хотя jQuery UI Draggable полностью совместим с Packery, библиотека Draggabilly может быть использована для более тесной интеграции. При использовании Draggabilly можно воспользоваться методом bindDraggabillyEvents:

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

$('.grid-item').each(function(i, itemElem) {
  var draggie = new Draggabilly(itemElem);
  pckry.bindDraggabillyEvents(draggie);
});

Draggabilly автоматически синхронизирует перетаскивание с Packery, включая расчет коллизий и смещение соседних элементов.

Обновление и добавление новых элементов

Если в сетку добавляются новые элементы динамически, необходимо повторно инициализировать Draggable:

var $newItems = $('<div class="grid-item"></div>');
$grid.append($newItems)
     .packery('appended', $newItems);

$newItems.draggable({
  containment: '.grid',
  stop: function(event, ui) {
    $grid.packery('layout');
  }
});

Метод appended сообщает Packery о новых элементах, а повторная инициализация Draggable обеспечивает возможность их перетаскивания.

Настройка дополнительных параметров Draggable

jQuery UI Draggable поддерживает ряд полезных опций, которые могут быть применены вместе с Packery:

  • handle – указывает, какая часть элемента используется для перетаскивания.
  • axis – ограничение перемещения по горизонтали (x) или вертикали (y).
  • grid – привязка перемещения к сетке с заданным шагом.

Пример с ограничением по вертикали и привязкой к сетке 50px:

$('.grid-item').draggable({
  axis: 'y',
  grid: [50, 50],
  containment: '.grid',
  stop: function() {
    $grid.packery('layout');
  }
});

События Packery и Draggable

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

  • dragItemPositioned – вызывается после позиционирования элемента.
  • layoutComplete – после завершения перестройки сетки.
  • removeComplete – после удаления элемента.

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

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

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

Оптимизация производительности

При большом количестве элементов рекомендуется:

  • Использовать transform: translate3d в стилях .grid-item для аппаратного ускорения.
  • Ограничивать количество вызовов layout() через stop вместо drag.
  • Группировать добавление новых элементов и вызывать layout() один раз после вставки всех элементов.

Важные замечания

  • jQuery UI Draggable и Packery совместимы только при корректной инициализации элементов.
  • Необходимо убедиться, что контейнер .grid имеет position: relative или absolute, иначе Packery может некорректно рассчитывать координаты.
  • Для динамических сеток обязательно повторно инициализировать Draggable при добавлении новых элементов.

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

Оглавление