使用 jqueryui 的多个可排序列表 - 不希望项目在列表组之间混合

Question

我有两对使用 JqueryUI 的拖放/排序列表。http://jqueryui.com/demos/sortable/

我的问题是我可以将项目从 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

感谢大家发帖然后回答这个问题。我也遇到过类似的挑战，你的回答给了我解决它所需的灵感。我也有多个可排序列表，不想在排序组之间混合。在我的情况下，组的数量取决于数据，所以我不知道我会有多少。这是我想出的解决方案。

$(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，它是创建的排序组的数量。

再次感谢大家。

Answer 2

由于您的 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
    });
});

编辑：
根据您的评论，这就是您可以绑定另一个列表的方式（#sortable5，连接到#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}];