Question

我有这个通过PHP / MySQL动态生成的标记

<div id="sortable">
    <h3>Italy</h3>
    <ul>
        <li id="row_1">Record > 1</li>
        <li id="row_2">Record > 2</li>
        <li id="row_3">Record > 3</li>
    </ul>

    <h3>Europe</h3>
    <ul>
        <li id="row_4">Record > 4</li>
        <li id="row_5">Record > 5</li>
        <li id="row_6">Record > 6</li>
    </ul>

    <h3>World</h3>
    <ul>
        <li id="row_7">Record > 7</li>
        <li id="row_9">Record > 9</li>
        <li id="row_8">Record > 8</li>
    </ul>
</div>
<div id="response"></div>

我可以将带有jQuery UI的LI拖动到新位置，并使用“serialize”获取新订单，为数据库更新做好准备正如你所看到的，有3个UL，但它们的N个LI都是相关的，所以我得到了每个拖动的N项“序列化”，这正是我想要的

所以，即如果我在Record 1中移动Record 3，我就明白了：

3,2,1,4,5,6,7,8,9＆lt;这正是我想要的

而不是这个：

3,2,1＆lt;这不是我想要的

这是我的jQuery代码：

$("#sortable").sortable({
    items: 'li',
    opacity: 0.6,
    cursor: 'move',
    update: function() {
    var order = $(this).sortable("serialize") + '&nAction=move';
    $.post("mypage.php", order, function(response){
        $("#response").html(response);
    });
}
}).disableSelection();

它正在工作，但不是我想要的：我的意思是我需要在各自的UL中拖放LI，而不是从一个UL拖放到另一个（始终保留N项序列化）

换句话说，我希望能够对其中的记录1,2和3进行排序，其中包括4,5和6以及其中7,8,9，而不会混合（即记录1可以' t进入第4,5,6组或第7,8,9组）

当然，总是得到N项序列化！（这就是我将“sortable”应用于集装箱潜水然后指定LI项目的主要原因）

我尝试使用“containment：'parent'”，但它仅适用于第一次拖放

以下是使用jsFiddle创建的两个在线示例：

The original one，LI从一个UL转到另一个
The version with "containment"，仅适用于第一次拖拽，但在以下拖拽中是混乱的

Answer 1

http://jsfiddle.net/zAUT3/2/ - 分别对每个人ul进行排序。然后，无论何时需要序列化，只需使用each()循环遍历所有可排序项，并构建复合序列化。

以下是上面链接的jsFiddle修改后的代码：

$(".sortable").sortable({
    items: 'li',
    opacity: 0.6,
    cursor: 'move',
    update: function() {
        var order ='';
        $('#allGroups .sortable').each(function(i,el) {
            order += $(el).sortable("serialize") +'&';
        });
        order += 'nAction=move';

        alert(order);
        $.post("/echo/html/", order, function(response) {
            $("#response").html(response);
        });
    }
}).disableSelection();

使用jQuery在不同的URl中排序LIst

1 个答案: