Draggable

Packery has easy hooks for draggable interactions.

Use the dragItemPositioned event to detect when Packery positions a released item.

Draggabilly

Draggabilly is a separate library that makes elements draggable. It’s pretty great because it supports multi-touch. After you initialize a new Draggabilly instance, bind its events to a Packery instance with bindDraggabillyEvents.

var $container = $('#container').packery({
  columnWidth: 80,
  rowHeight: 80
});

$container.find('.item').each( function( i, itemElem ) {
  // make element draggable with Draggabilly
  var draggie = new Draggabilly( itemElem );
  // bind Draggabilly events to Packery
  $container.packery( 'bindDraggabillyEvents', draggie );
});

jQuery UI Draggable

Packery works with jQuery UI Draggable. Bind Draggable events to Packery with bindUIDraggableEvents.

var $container = $('#container').packery({
  columnWidth: 80,
  rowHeight: 80
});
// get item elements, jQuery-ify them
var $itemElems = $container.find('.item');
// make item elements draggable
$itemElems.draggable();
// bind Draggable events to Packery
$container.packery( 'bindUIDraggableEvents', $itemElems );

Grid

By default, dragged items can be positioned anywhere inside the bounds of the container element.

var $container = $('#container').packery();

By setting columnWidth, rowHeight, or both, Packery will align the item to the grid when released.

var $container = $('#container').packery({
  columnWidth: 80,
  rowHeight: 80
});