Question

我需要将jQuery可排序项目保存到cookie中以排序项目顺序。在这里，我有jQuery代码工作。我需要对cookie使用相同的功能。

任何人都可以这样做。 bcos我在jQuery方面不是那么好。

这是我目前的HTML

<ul id="boxes" style="margin-top:5px;">    
    <li id="box1" class="con">
        <div class="drag"></div>
        <p>Box 01</p>   
    </li>
    <li id="box2" class="con">
        <div class="drag"></div>
        <p>Box 02</p>
    </li>
    <li id="box3" class="con">
        <div class="drag"></div>
        <p>Box 03</p>
    </li>
    <li id="box4" class="con">
        <div class="drag"></div>
        <p>Box 04</p>
    </li>
</ul>

和JQ

   var arrValuesForOrder = ["3", "1", "4", "2"];
    var ul = $("#boxes"),
        items = $("#boxes li.con");

    for (var i = arrValuesForOrder[arrValuesForOrder.length - 1]; i >= 0; i--) {
        // arrValuesForOrder[i] element to move
        // i = index to move element at
        ul.prepend( items.get(arrValuesForOrder[i] - 1));
    }

        $("#boxes").var arrValuesForOrder = ["3", "1", "4", "2"];
    var ul = $("#boxes"),
        items = $("#boxes li.con");

    for (var i = arrValuesForOrder[arrValuesForOrder.length - 1]; i >= 0; i--) {
        // arrValuesForOrder[i] element to move
        // i = index to move element at
        ul.prepend( items.get(arrValuesForOrder[i] - 1));
    }

    $("#boxes").sortable({
        handle : '.drag',
        revert: true ,
        opacity: 0.7,
        placeholder: 'placeholder',
        update: function() {
            var order = $('#boxes').sortable('serialize');
            alert(order);
        }({
            handle : '.drag',
            revert: true ,
            opacity: 0.7,
            placeholder: 'placeholder',
            update: function() {
                var order = $('#boxes').sortable('serialize');
                alert(order);
            }

我可以在这里向您展示演示http://jsfiddle.net/sweetmaanu/82r5v/6/

Answer 1

我找到了带有cookie插件的解决方案。在这里检查并申请

$(function(){
    if($.cookie("box_order")){
        var arrValuesForOrder = $.cookie("box_order");
        var ul = $("#boxes"),
        items = $("#boxes li.con");

        for (var i = arrValuesForOrder[arrValuesForOrder.length - 1]; i >= 0; i--) {
            ul.prepend( items.get(arrValuesForOrder[i] - 1));
        }
    }
});

在对方框进行排序时获取方框ID

$("#boxes").sortable({
        handle : '.drag',
        revert: true ,
        opacity: 0.7,
        placeholder: 'placeholder',
        update: function() {
            var order = $("#boxes").sortable("toArray").join(',').replace(/[a-zA-Z]/gi, "");
            $.cookie("box_order",order, {expires: 365, path: '/'});  
        }
    });

jQuery sortable（）：如何用cookie显示排序顺序？

1 个答案: