Packery - show order after dragging

by Reusablecode

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

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 );

});