多個排序列表 - 不希望項目列表組

Question

我有使用JqueryUI.http2雙拖/放/排序列表之間的混合：//jqueryui.com/demos/sortable/

我問題是我可以將items從sortable1，sortable2移動到sortable3和4.我希望他們能夠進行辯論。所以物品只能在（1和2）和（3和4）之間移動。

爲了發生這種情況，我必須爲sortable3和sortable4分配一個不同的類嗎？無論如何，我可以以某種方式結合功能？

$(function() { 
     $("ul.droptrue").sortable({ 
      connectWith: "ul" 
     }); 

     $("ul.dropfalse").sortable({ 
      connectWith: "ul", 
      dropOnEmpty: false 
     }); 

     $("#sortable1, #sortable2").disableSelection(); 
     $("#sortable3, #sortable4").disableSelection(); 

}); 


<ul id="sortable1" class='droptrue'> 
    <li class="ui-state-default">Can be dropped..</li> 
    <li class="ui-state-default">..on an empty list</li> 
    <li class="ui-state-default">Item 3</li> 
    <li class="ui-state-default">Item 4</li> 
    <li class="ui-state-default">Item 5</li> 
</ul> 

<ul id="sortable2" class='dropfalse'> 
    <li class="ui-state-highlight">Cannot be dropped..</li> 
    <li class="ui-state-highlight">..on an empty list</li> 
    <li class="ui-state-highlight">Item 3</li> 
    <li class="ui-state-highlight">Item 4</li> 
    <li class="ui-state-highlight">Item 5</li> 
</ul> 
<ul id="sortable3" class='droptrue'> 
    <li class="ui-state-default">Can be dropped..</li> 
    <li class="ui-state-default">..on an empty list</li> 
    <li class="ui-state-default">Item 3</li> 
    <li class="ui-state-default">Item 4</li> 
    <li class="ui-state-default">Item 5</li> 
</ul> 

<ul id="sortable4" class='dropfalse'> 
    <li class="ui-state-highlight">Cannot be dropped..</li> 
    <li class="ui-state-highlight">..on an empty list</li> 
    <li class="ui-state-highlight">Item 3</li> 
    <li class="ui-state-highlight">Item 4</li> 
    <li class="ui-state-highlight">Item 5</li> 
</ul> 

Answer 1

因爲你droptrue和dropfalse參數，並且您有每個名單上唯一的ID的事實，你並不需要更改的標記，你只需要有點不同調用.sortable功能：

$("#sortable1").sortable({ 
     connectWith: "#sortable2" 
    }); 

    $("#sortable2").sortable({ 
     connectWith: "#sortable1", 
     dropOnEmpty: false 
    }); 

    $("#sortable3").sortable({ 
     connectWith: "#sortable4", 
    }); 

    $("#sortable4").sortable({ 
     connectWith: "#sortable3", 
     dropOnEmpty: false 
    }); 

或者，你可以使用對象設置每個排序項的參數，並通過迭代的對象，使用參數申請.sortable每個：

var lists = [{"listid":"#sortable1", "connectid":"#sortable2", "drop":true}, 
{"listid":"#sortable2", "connectid":"#sortable1", "drop":false}, 
{"listid":"#sortable3", "connectid":"#sortable4", "drop":true}, 
{"listid":"#sortable4", "connectid":"#sortable3", "drop":false}]; 

$.each(lists, function(i, list) { 
    $(list.listid).sortable({ 
     connectWith: list.connectid, 
     dropOnEmpty: list.drop 
    }); 
}); 

編輯：
基於您的評論，這是你如何能配合在另一個列表（​​，連接到兩個#sortable3和#sortable4）。 注意使用多個ID的的，用逗號分隔：

var lists = [{"listid":"#sortable1", "connectid":"#sortable2", "drop":true}, 
{"listid":"#sortable2", "connectid":"#sortable1", "drop":false}, 
{"listid":"#sortable3", "connectid":"#sortable4, #sortable5", "drop":true}, 
{"listid":"#sortable4", "connectid":"#sortable3, #sortable5", "drop":false}, 
{"listid":"#sortable5", "connectid":"#sortable3, #sortable4", "drop":false}]; 

Answer 2

感謝大家的發佈，然後回答這個。我有類似的挑戰，你的回答給了我需要解決它的靈感。我也有多個可排序列表，不希望在排序組之間混合。在我的情況下，組的數量取決於數據，所以我不知道我會有多少。這是我想出的解決方案。

$(function() {  
    if ($.cookie("sortGroupsCnt")) { 
     var grpcnt = Number($.cookie("sortGroupsCnt"));   
     for (i = 0; i < grpcnt; i++) { 
      var connectClass = ".s" + i; 
      $(connectClass).sortable({ 
       connectWith: connectClass, 
       dropOnEmpty: true 
      }).disableSelection(); 
     } 
    }; 

}）;

在我的PHP邏輯中，在每個排序組中，我使用相同的類代碼創建多個UL。所以在第1組中，所有的UL都有class =「s0」。在第2組中，所有的UL都有class =「s1」等。然後我創建一個名爲「sortGroupCnt」的cookie，它是創建的排序組的數量。

再次感謝大家。