JQuery Özdeş Boyutlar Olmayan Sıralanabilir Izgara İşlevsellik

Question

JQuery'nin Sortable ızgarasının yaptığı gibi (http://jqueryui.com/demos/sortable/#display-grid) bir sortable (sürükle ve bırak yöntemiyle) ızgara oluşturmaya çalışıyorum. Ancak, Sortable, yalnızca aynı boyutlara sahip div'leri kullanmanızı gerektirir. Benim amaçlarım için her bloğun farklı genişlik ve yüksekliklere sahip olmasına izin verilir.

Aradığım işlevsellik, diğer öğeleri yoldan çekerken "grid-grid" yetenekleri. Sürüklenebilir, diğer öğeleri üst üste binmekten ve diğer unsurları yoldan çekmekten sakınmak dışında her şeyi yapar.

Ya da JQuery olmak zorunda değil. Daha kolaysa diğer yöntemleri kullanmaya açığım.

Answer 1

Kısa cevap: yeni konumlarını göre tüm ızgara parçasını yeniden hesaplamak için

kullanım "dur" olayı.

Genel yorumlar:

değişken öğenin boyutları ile

sıralanabilir ızgara - farklı boyutta elemanları, birden çok kez hareket bunlardan birini sürükleyerek yaparken, yukarı ve aşağı atlama gibi, görsel bir karmaşa; ve her hareketten sonra düzen tamamen farklı. Benzer özelliğini Çalışma

jQuery eklentisi "değiştirilebilen" http://www.eslinstructor.net/demo/swappable/swappable_home.html

gelişmiş ve son zamanlarda ben bu eklenti ile ilgili aynı soruyu cevapladı:

to Swap elemnts(with className too) when Draged & Dropped

tartışma bakmak ve lütfen belki sana yardım eder.

saygılarımla,

-Vadim

Answer 2

burada Prototipimin görebileceğiniz gibi, aynı boyutlarda olmalı öğeleri gerektirmez

jQuery sıralanabilir: http://brettlyman.net/dashboard/index3.html

Çoğu insan < ul kullanmak > Sorgulanabilir kapsayıcı ve <li> 'un sıralanabilir öğeler olarak ve istediğiniz herhangi bir içeriği içerebilir. Sadece "liste tarzı-türünü koyduğunuzdan emin olun: none; margin: 0; padding: 0;" <ul> stilinde bir kap gibi görünüyor/davranıyor.

Maalesef, düzenlenebilir ile serbest biçimli bir ızgara yapamazsınız - öğeler birbirine yakın olmalıdır. Benim prototipimde her şeyimi bıraktım, böylece sağa kadar doldurup bir sonraki satıra geçerler. Ancak, kapsayıcılarımın yeniden boyutlandırılması için ayarlanmış ızgara seçeneğim var, bu nedenle ızgara tipi bir düzeni zorlayabiliyorum.

Başkalarının da aynı türde bir sorunu olması durumunda çözümümümü gönderdiğimi düşündüm.

Answer 3

Bu soruyu kendim için çözmeye çalıştım. Ben bir çözüm çalışıyorum benim ilk yineleme çıkıyorum

: bir droppable olarak ana kapsayıcı kullanın.eğer çalışırsa size bildiririz: Aşağıdaki HTML için

:

<div id="sortable"> 
    <div><div class="handle"></div>1</div> 
    <div><div class="handle"></div>2</div> 
    <div><div class="handle"></div>3</div> 
    ... 
</div> 

aşağıdaki JavaScript kullanarak:

$('#sortable') 
    .sortable({ 
    handle: '.handle', 
    tolerance: 'pointer' 
    }) 
    .droppable({ 
    drop: function(e, ui) { 
     var previousElement = ui.draggable.parent().children().filter(function() { 
     var $this = $(this); 
     var pos = $this.position(); 
     return (this != ui.draggable[0]) && (pos.left <= ui.position.left) && (pos.top <= ui.position.top); 
     }).last(); 
     if(previousElement.length) { 
     previousElement.after(ui.draggable[0]); 
     ui.draggable.parent().data().sortable._noFinalSort = true; 
     } 
    } 
    });