代码之家  ›  专栏  ›  技术社区  ›  Ivan

用jQuery对不同ul中的LIs进行排序

  •  1
  • Ivan  · 技术社区  · 14 年前

    我通过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 sortable的LIs拖到新的位置,并使用“serialize”获取它们的新订单,为数据库更新做好准备 如您所见,有3个ul,但它们的N-LIs都是相关的,所以每次拖动时我都得到一个N-items“序列化”,这正是我想要的

    所以,如果我把唱片3移到唱片1的位置,我会得到:

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

    而不是这个:

    3,2,1<这不是我想要的

    这是我的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中拖放LIs,而不是从一个UL到另一个UL(始终保持N项序列化)

    换言之,我希望能够对其中的记录1, 2和3进行排序,其中4, 5和6,其中7,8,9没有混合(即,记录1不能进入第4、5、6组,也不在第7、8、9组)。

    当然,总是得到N项序列化!(这就是我将“sortable”应用于容器潜水然后指定LI项的主要原因)

    我试过用“containment:”parent“,但它只在第一次拖放时起作用

    以下是使用jsFiddle制作的两个在线示例:

    1. The original one ,LIs从一个UL转到另一个UL
    2. The version with "containment" ,仅在第一次拖动时有效,但在下面的拖动中很混乱
    1 回复  |  直到 12 年前
        1
  •  0
  •   Lee    14 年前

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