Define the alignment order of items with packaging

Question

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

Suppose I get an array of data from a server. The data has a name and order number.

I have 5 array elements with a serial number from 1 to 5.

Now I want to place 5 sections, where each div is located in a specific place in the package layout system.

See this image:

Colors are NOT important. It is important that the order of the divs matches their ordinal number.

The sequence number stream goes from top to bottom and from left to right .

Question

How to determine the order of sections in a layout system? What do they automatically link to my desired stream? Or a manual order hint will also be great :-)

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

To get the index that the package gives, the elements must be called 'getItemElements' to get the exact index of each element. The reason is that the package does not reorder items on the DOM, it saves its own index.

Here I solved this problem:

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

Therefore, when you pass in the elements, be sure to keep / use the same index order for the elements that the packages provided to you with the specified function