Packery has easy hooks for draggable interactions.

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


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');
  columnWidth: 80,
  rowHeight: 80
// get item elements, jQuery-ify them
var $itemElems = $( $container.packery('getItemElements') );
// make item elements draggable
// bind Draggable events to Packery
$container.packery( 'bindUIDraggableEvents', $itemElems );


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