Javascript 使用jqueryui-don'；我不希望项目在列表组之间混合_Javascript_Jquery_Jquery Ui

Javascript 使用jqueryui-don'；我不希望项目在列表组之间混合

javascript jquery jquery-ui

Javascript 使用jqueryui-don'；我不希望项目在列表组之间混合,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我有两对使用JqueryUI的拖放/可排序列表。http://jqueryui.com/demos/sortable/ 我的问题是，我可以将项目从sortable1、sortable2移动到sortable3和Sortable4。我想让他们辩论一下。因此项目只能在（1和2）和（3和4）之间移动我是否必须为sortable3和sortable4分配一个不同的类才能发生这种情况？是否有我能以某种方式组合功能的方法 $(function() { $( "ul.droptrue" ).

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

我的问题是，我可以将项目从sortable1、sortable2移动到sortable3和Sortable4。我想让他们辩论一下。因此项目只能在（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>

$（函数（）{
$（“ul.droptrue”）。可排序({
与“ul”连接
});
$（“ul.dropfalse”）。可排序({
连接到：“ul”，
dropOnEmpty：错
});
$（“#可排序1，#可排序2”）.disableSelection（）；
$（“#可排序3，#可排序4”）.disableSelection（）；
});

可以删除
空列表中的
第3项
第4项
第5项


无法删除“
空列表上的“”
第3项
第4项
第5项


可以删除
空列表中的
第3项
第4项
第5项


无法删除“
空列表上的“”
第3项
第4项
第5项

由于您的

droptrue

和

dropfalse

参数，而且每个列表上都有唯一的id，因此您不需要更改标记，只需调用

。可排序的

函数，方式稍有不同：

    $( "#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}];

由于您的
droptrue
和
dropfalse
参数，以及每个列表上都有唯一的id，因此您不需要更改标记，只需调用
。可排序的
函数就可以了：

$( "#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}];

谢谢大家的发帖和回复。我也遇到过类似的挑战，你的回答给了我解决问题所需的灵感。我也有多个可排序列表，不想在排序组之间混用。在我的例子中，组的数量取决于数据，所以我不知道有多少组。这是我想出的解决办法

$(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(); } };

$（函数（）{ if（$.cookie（“sortGroupsCnt”））{ var grpcnt=Number（$.cookie（“sortGroupsCnt”）；对于（i=0；i
})) 在我的PHP逻辑中，在每个排序组中，我创建了多个UL，它们都使用相同的类代码。因此，在第1组中，所有UL均具有class=“s0”。在组2中，所有UL都有class=“s1”等。然后我创建了一个名为“sortGroupCnt”的cookie，它是创建的排序组数再次感谢大家感谢大家的发帖和回复。我也遇到过类似的挑战，你的回答给了我解决问题所需的灵感。我也有多个可排序列表，不想在排序组之间混用。在我的例子中，组的数量取决于数据，所以我不知道有多少组。这是我想出的解决办法 $(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(); } }; $（函数（）{ if（$.cookie（“sortGroupsCnt”））{ var grpcnt=Number（$.cookie（“sortGroupsCnt”）；对于（i=0；i })) 在我的PHP逻辑中，在每个排序组中，我创建了多个UL，它们都使用相同的类代码。因此，在第1组中，所有UL均具有class=“s0”。在组2中，所有UL都有class=“s1”等。然后我创建了一个名为“sortGroupCnt”的cookie，它是创建的排序组数再次感谢大家非常感谢你的回复。但是，如果我有另一个排序表5，它连接到3和4，而不是1和2呢？非常感谢您的回复。但是，如果我有另一个列表可排序5，它同时连接到3和4，而不是1和2，该怎么办？请参阅我的附加编辑以回答您关于添加的评论中的问题#可排序5请参阅我的附加编辑以回答您关于添加#可排序5的评论中的问题