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 = document.querySelector('#draggabilly-demo .packery');
var pckry = new Packery( container, {
  columnWidth: 80,
  rowHeight: 80
});

var itemElems = pckry.getItemElements();
// for each item...
for ( var i=0, len = itemElems.length; i < len; i++ ) {
  var elem = itemElems[i];
  // make element draggable with Draggabilly
  var draggie = new Draggabilly( elem );
  // bind Draggabilly events to Packery
  pckry.bindDraggabillyEvents( draggie );
}

jQuery UI Draggable

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

var $container = $('#ui-draggable-demo .packery');
$container.packery({
  columnWidth: 80,
  rowHeight: 80
});
// get item elements, jQuery-ify them
var $itemElems = $( $container.packery('getItemElements') );
// 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 pckry = new Packery( container );

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

var pckry = new Packery( container, {
  columnWidth: 80,
  rowHeight: 80
});