Draggable
- Draggabilly
- jQuery UI Draggable
- Dropping
- Drop placeholder
- Grid drop positions
- dragItemPositioned
- Item order
Packery layouts can be draggable, perfect for draggable Masonry layouts and draggable dashboards.
Draggable Masonry layout
Draggable dashboard
Draggabilly
Draggabilly is a separate library that makes elements draggable. It’s pretty great because it supports touch devices. After you initialize a new Draggabilly instance, bind its events to a Packery instance with bindDraggabillyEvents.
// jQuery
$grid.packery( 'bindDraggabillyEvents', draggie )
// vanilla JS
pckry.bindDraggabillyEvents( draggie )
draggie
Draggabilly
// initialize Packery
var $grid = $('.grid').packery({
itemSelector: '.grid-item',
// columnWidth helps with drop positioning
columnWidth: 100
});
// make all grid-items draggable
$grid.find('.grid-item').each( function( i, gridItem ) {
var draggie = new Draggabilly( gridItem );
// bind drag events to Packery
$grid.packery( 'bindDraggabillyEvents', draggie );
});
/* highlight drag & drop */
/* Draggabilly adds is-dragging */
.grid-item.is-dragging,
/* Packery adds class while transitioning to drop position */
.grid-item.is-positioning-post-drag {
background: #EA0;
z-index: 2; /* keep dragged item on top */
}
Drag items
Edit this demo or vanilla JS demo on CodePen
Unbind Draggabilly events with unbindDraggabillyEvents.
jQuery UI Draggable
Packery works with jQuery UI Draggable. Bind Draggable events to Packery with bindUIDraggableEvents.
// jQuery
$grid.packery( 'bindUIDraggableEvents', $items )
$items
jQuery
Draggable item elements
// initialize Packery
var $grid = $('.grid').packery({
itemSelector: '.grid-item',
// columnWidth helps with drop positioning
columnWidth: 100
});
// make all items draggable
var $items = $grid.find('.grid-item').draggable();
// bind drag events to Packery
$grid.packery( 'bindUIDraggableEvents', $items );
/* highlight drag & drop */
/* jQuery UI Draggable adds ui-draggable-dragging */
.grid-item.ui-draggable-dragging,
/* Packery adds class while transitioning to drop position */
.grid-item.is-positioning-post-drag {
background: #EA0;
z-index: 2; /* keep dragged item on top */
}
Drag items
Unbind jQuery UI Draggable events with unbindUIDraggableEvents.
Dropping
Drop placeholder
Packery will position a placeholder element, .packery-drop-placeholder, where a dragged element will be positioned when dropped. Style the drop placeholder with your own CSS as its unstyled by default.
.packery-drop-placeholder {
outline: 3px dashed #444;
outline-offset: -6px;
/* transition position changing */
-webkit-transition: -webkit-transform 0.2s;
transition: transform 0.2s;
}
Drag items
Edit this demo or vanilla JS demo on CodePen
Grid drop positions
We recommend setting columnWidth (or rowHeight for horizontal layouts) to help align dropped items to a grid . Without columnWidth set, dragged items can only be dropped in place of other items.
dragItemPositioned
Use the dragItemPositioned event to detect when Packery positions a dropped item.
Item order
After dropping an item, you can get item elements in order with getItemElements.
// show item order after layout
function orderItems() {
var itemElems = $grid.packery('getItemElements');
$( itemElems ).each( function( i, itemElem ) {
$( itemElem ).text( i + 1 );
});
}
$grid.on( 'layoutComplete', orderItems );
$grid.on( 'dragItemPositioned', orderItems );
Drag items
Edit this demo or vanilla JS demo on CodePen