packery

Question

ile öğelerin hizalama sırasını belirleme Bu benim codepen geçerli: http://codepen.io/helloworld/pen/JoKmQr

ben sunucudan veri dizisini almak varsayalım. Verilerin bir başlığı ve bir sipariş numarası vardır.

Ben Şimdi her div packery düzeni sistem içinde belirli bir yerde konumlandırılmış 5 div'leri düzenleme şeklini 1'den 5.

için ORDERNUMBER ile 5 dizi öğeler var.

renkler önemli DEĞİLDİR:

bu resme bakın. Önemli olan, sipariş numaralarına göre divların sırasıdır.

ORDERNUMBER akışı üstaşağıgider ve den sağ için bıraktı.

SORU:

nasıl düzen sisteminde div sırasını belirleyebilir ? İstediğim akışa otomatik olarak yerleştiriliyorlar mı? Ya da ince :-) olurdu elle siparişi hakkında ipucu

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

Paketin öğeleri verdiği endeksi elde etmek için, her öğenin doğru bir dizinini almak için 'getItemElements' öğesini çağırmalıdır. Nedeni, paketin DOM'deki öğeleri yeniden sıralamaması, kendi endeksini tutmasıdır. Eğer ürün packery