Determine the alignment order of the items with packery

Question

This is my codepen: http://codepen.io/helloworld/pen/JoKmQr

Lets assume I get an array of data from the server. The data has a title and an order number.

I have 5 array items with orderNumber from 1 to 5.

Now I want to layout 5 divs where each div is positioned at a certain place in the packery layout system.

See this image:

The colors are NOT important. What is important is the order of the divs according to their order number.

The flow of the orderNumber goes from top to down and from left to right.

QUESTION:

How can I determine the order of the divs in the layout system? That they layout automatically to my wanted flow? Or hint about ordering manually would also be fine :-)

HTML

<h1>Packery demo - Draggabilly</h1>
<div class="packery js-packery" data-packery-options='{ "isHorizontal": true }'>
  <div class="item w1"></div>
  <div class="item h4"></div>
  <div class="item w2"></div>
  <div class="item w3"></div>
  <div class="item h2"></div>
</div>

CSS

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body { font-family: sans-serif; }

.packery {
  background: #FDD;
  background: hsla(45, 100%, 40%, 0.2);
  counter-reset: item;
  height: 400px;
}

/* clearfix */
.packery:after {
  content: ' ';
  display: block;
  clear: both;
}

.item {
  width: 80px;
  height: 80px;
  float: left;
  border: 4px solid #333;
  border-color: hsla(0, 0%, 0%, 0.3);
}

.item:hover {
  border-color: white;
  cursor: move;
}

.item.w1 { width:   80px; background:green; }
.item.w2 { width:   80px; background:blue; }
.item.w3 { width:   80px; background:yellow; }
.item.h2 { height:  80px; background:red; }
.item.h4 { height: 160px; width:80px; background:orange;}

.item:before {
  counter-increment: item;
  content: counter(item);
  display: block;
  color: white;
  padding-top: 0.2em;
  text-align: center;
  font-size: 18px;
}

.item.is-dragging,
.item.is-positioning-post-drag {
  border-color: white;
  background: #09F;
  z-index: 2;
}

JS

// external js
// http://packery.metafizzy.co/packery.pkgd.js
// http://draggabilly.desandro.com/draggabilly.pkgd.js

$( function() {

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

  $container.find('.item').each( function( i, itemElem ) {
    // make element draggable with Draggabilly
    var draggie = new Draggabilly( itemElem );
    // bind Draggabilly events to Packery
    $container.packery( 'bindDraggabillyEvents', draggie );
  });

});

Answer 1

In order to get the index that packery gives elements one must call 'getItemElements' to get an accurate index of each element. The reason being is that packery doesn't actually reorder the items on the DOM it keeps its own index's.

Here's a way I solved this issue:

var $itemElems = $($container.packery('getItemElements'));

orderItems = function() {
var itemElems = $($container.packery('getItemElements'));
$(itemElems).each(function(i, itemElem) {
$(itemElem).attr('data-module-index', i); 
// adds a data attribute called data-module-index to the element and makes the value its actual index.
                });
            };
orderItems();

So when you relayout the items be sure to save/use the same index order for elements that packery gave you with the above function