jQuery UI的可排序的網格單元跨越垂直

Question

這裏是鏈接到現有的排序http://jsfiddle.net/bcAH2/5

僅僅複製代碼，

<ul id="sortable"> 
    <li class="ui-state-default">1</li> 
    <li class="ui-state-default">2</li> 
    <li class="ui-state-default">3</li> 
    <li class="ui-state-default four">4</li> 
    <li class="ui-state-default">5</li> 
    <li class="ui-state-default">6</li> 
    <li class="ui-state-default">7</li> 
    <li class="ui-state-default">8</li> 
    <li class="ui-state-default">9</li> 
    <li class="ui-state-default">10</li> 
    ... 
</ul> 

腳本

$(function() { 
    $("#sortable").sortable(); 
    $("#sortable").disableSelection(); 
    $("#sortable .four").css("height","190px"); 
}); 

我想要實現的是填充空格b elow cells 1 2 3 with cell like 5 6 7 8 ...是不是可以通過拖放來實現？

Answer 1

我發現這個優雅的插件，ShapeShift該做這項工作很好

有gridster的另一個分叉版本，認爲值得分享這裏，gridster.js Forked

Answer 2

這裏的問題不在於拖放，而在於浮動元素的流動。

「四」之後的所有元素將與它對齊，並且因爲它更高 - 所佔用的空間更多。因此，「四」之前的第二排空間實際上不是「網格」的一部分。

實際上，這裏沒有網格，因爲您使用的是浮動元素。

希望這可以幫助你理解爲什麼它不能用當前樣式和腳本實現。

Answer 3

有一個名爲gridster的jQuery插件可以做你想做的事（參見頭版的演示）。如this answer中更詳細解釋的那樣，更簡單但不太靈活的替代方案是創建多個列並使每個列可分類，將它們連接起來以允許從一個列拖到另一列。這裏的an example接近你，但與一些注意事項：

• 你可以有更大的height磚，但不具有更大width，不搞亂佈局（gridster沒有此限制）;
• 在一列中的兩個圖塊之間不能有「空白空間」（gridster的限制較少）;
• 如果您從一列中刪除所有圖塊，它將消失（除非將其設置爲具有固定寬度，有或沒有內容; Gridster沒有此限制）。