Determinare l'ordine di allineamento degli elementi con Packery

Question

Questo è il mio codepen: http://codepen.io/helloworld/pen/JoKmQr

lascia supporre ottengo un array di dati dal server. I dati hanno un titolo e un numero d'ordine.

ho 5 elementi di matrice con orderNumber da 1 a 5.

Ora voglio il layout 5 div dove ogni div è posizionato in un determinato luogo nel sistema di layout Packery.

visualizzare questa immagine:

I colori non sono importanti. Ciò che è importante è l'ordine dei div in base al loro numero d'ordine.

Il flusso del orderNumber va da cima a giù e da sinistra a destra.

DOMANDA:

Come posso determinare l'ordine dei div nel sistema di layout? Che si impostano automaticamente al mio flusso desiderato? O accennare di ordinare manualmente sarebbe anche bene :-)

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

Per ottenere l'indice fornito da packery agli elementi, è necessario chiamare 'getItemElements' per ottenere un indice accurato di ciascun elemento. La ragione sta nel fatto che packery in realtà non riordina gli oggetti sul DOM mantiene il proprio indice.

Ecco un modo ho risolto questo problema:

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

Quindi, quando si Ridefinisci layout gli elementi essere sicuri di salvare/utilizzare lo stesso ordine di indice per gli elementi che Packery ti ha dato con la funzione di cui sopra