docReady( function() { var container = document.querySelector('#container'); var pckry = new Packery( container, { columnWidth: 80, rowHeight: 80 }); var itemElems = pckry.getItemElements(); // make items draggable for ( var i=0, len = itemElems.length; i < len; i++ ) { var elem = itemElems[i]; var draggie = new Draggabilly( elem ); pckry.bindDraggabillyEvents( draggie ); } // show item order after layout function orderItems() { var itemElems = pckry.getItemElements(); for ( var i=0, len = itemElems.length; i < len; i++ ) { var elem = itemElems[i]; elem.textContent = i + 1; } } pckry.on( 'layoutComplete', orderItems ); pckry.on( 'dragItemPositioned', orderItems ); });
<div id="container" class="packery"> <div class="item w4 h2"></div> <div class="item w2 h2"></div> <div class="item w2 h4"></div> <div class="item w2 h2"></div> <div class="item w4 h4"></div> <div class="item w2 h2"></div> <div class="item w2 h4"></div> <div class="item w4 h4"></div> <div class="item w2 h2"></div> <div class="item w2 h2"></div> </div>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .packery .item { width: 40px; height: 40px; float: left; background: #C09; border: 4px solid #333; border-color: hsla(0, 0%, 0%, 0.3); margin: 0; } .packery .item.w2 { width: 80px; background: #9C0; } .packery .item.h2 { height: 80px; background: #0C9; } .packery .item.h4 { height: 160px; background: #C90; } .packery .item.w4 { width: 160px; background: #90C; } .packery .item.is-positioning-post-drag, .packery .item.is-dragging { background: #09F; z-index: 2; border-color: yellow; }