title: Changing DOM order after drag and drop with packey and draggabilly
body: <p>There is a bug on this code </p>
  
  <p><a href="http://codepen.io/desandro/pen/cbhDG" rel="nofollow">http://codepen.io/desandro/pen/cbhDG</a></p>
  
  <pre><code>docReady(function () {
  
      var slidesElem = document.querySelector('.slides');
      var slideSize = getSize(document.querySelector('.slide'));
      var pckry = new Packery(slidesElem, {
          rowHeight: slideSize.outerHeight
      });
      // get item elements
      var itemElems = pckry.getItemElements();
      // for each item...
      for (var i = 0, len = itemElems.length; i &lt; len; i++) {
          var elem = itemElems[i];
          // make element draggable with Draggabilly
          var draggie = new Draggabilly(elem, {
              axis: 'y'
          });
          // bind Draggabilly events to Packery
          pckry.bindDraggabillyEvents(draggie);
      }
  
      // re-sort DOM after item is positioned
      pckry.on('dragItemPositioned', function (_pckry, draggedItem) {
          var index = pckry.items.indexOf(draggedItem);
          var nextItem = pckry.items[index + 1];
          slidesElem.insertBefore(draggedItem.element, nextItem.element);
      });
  
  });
  </code></pre>
  
  <p>When I drag the "first" item to the "last one" the DOM doesn't change and error in console appear.</p>
  
  <p>Any ideas? I'm really struggling to find the error.</p>
  
  <p>I will appreciate all your help</p>
  
  <p>The sample is using: <a href="//packery.metafizzy.co" rel="nofollow">packery.metafizzy.co</a> with <a href="//draggabilly.desandro.com" rel="nofollow">draggabilly.desandro.com</a></p>