Ustal kolejność wyrównanie elementów z packery

Question

To mój codepen: http://codepen.io/helloworld/pen/JoKmQr

Załóżmy mam tablicę danych z serwera. Dane mają tytuł i numer zamówienia.

mam 5 pozycji tablicę zawierającą numer zamówienia od 1 do 5.

Teraz chcę układ 5 div div gdzie każdy jest umieszczony w określonym miejscu w systemie układu packery.

Zobacz to zdjęcie:

Kolory nie są ważne. Ważna jest kolejność elementów div zgodnie z ich numerem porządkowym.

Przepływ NUMER_ZAMÓWIENIA idzie z górnym do dół iz lewo do prawo.

PYTANIE:

Jak można ustalić kolejność DIV w systemie układu? Że układają się automatycznie w moim pożądanym strumieniu? Lub podpowiedź na temat zamawiania ręcznie byłoby również w porządku :-)

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

Aby uzyskać indeks, który packery daje elementom, należy wywołać 'getItemElements', aby uzyskać dokładny indeks każdego elementu. Powodem jest to, że pakiet nie zmienia kolejności elementów w DOM, zachowuje swój własny indeks.

Oto sposób mogę rozwiązać ten 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(); 

Więc kiedy relayout elementy należy zapisywać/używać tej samej kolejności indeksu elementów, które packery dał Ci powyższej funkcji