Packery - show order after dragging

by zerolfc

HTML

<script src="http://draggabilly.desandro.com/draggabilly.pkgd.js"></script>
<script src="http://packery.metafizzy.co/packery.pkgd.js"></script>
<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>

CSS

* {
    -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;
}

JavaScript

$(function () {
    var container = $('#container');

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

    var itemElems = pckry.find('.item');
    // make items draggable
    for (var i = 0, len = itemElems.length; i < len; i++) {
        var elem = itemElems[i];
        var draggie = new Draggabilly(elem);
        pckry.packery('bindDraggabillyEvents',draggie);
    }

    // show item order after layout
    function orderItems() {
        //var itemElems = pckry.pckry.find('.item');
        for (var i = 0, len = itemElems.length; i < len; i++) {
            var elem = itemElems[i];
            console.log(elem);
            elem.textContent = i + 1;
        }
    }
    //pckry.packery('on', 'layoutComplete', orderItems);
    pckry.packery('on', 'dragItemPositioned', orderItems);

});