让UI.sortable与cookie插件一起工作

时间:2010-11-30 17:13:00

标签: javascript jquery jquery-ui

我实际上找到了一个适用于一个用户的代码片段,但是当我尝试将代码应用到我的页面时,我可以对元素进行排序,但它永远不会保存我已经排序的内容。请告诉我这段代码有什么问题。

(我从另一个问题复制而不是我的)

var setSelector = "#sortable";
// set the cookie name
var setCookieName = "listOrder";
// set the cookie expiry time (days):
var setCookieExpiry = 7;

// function that writes the list order to a cookie
function getOrder() {
        // save custom order to cookie
        $.cookie(setCookieName, $(setSelector).sortable("toArray"), { expires: setCookieExpiry, path: "/" });
}

// function that restores the list order from a cookie
function restoreOrder() {
        var list = $(setSelector);
        if (list == null) return

        // fetch the cookie value (saved order)
        var cookie = $.cookie(setCookieName);
        if (!cookie) return;

        // make array from saved order
        var IDs = cookie.split(",");

        // fetch current order
        var items = list.sortable("toArray");

        // make array from current order
        var rebuild = new Array();
        for ( var v=0, len=items.length; v<len; v++ ){
                rebuild[items[v]] = items[v];
        }

        for (var i = 0, n = IDs.length; i < n; i++) {

                // item id from saved order
                var itemID = IDs[i];

                if (itemID in rebuild) {

                        // select item id from current order
                        var item = rebuild[itemID];

                        // select the item according to current order
                        var child = $("ul" + setSelector + ".ui-sortable").children("#" + item);

                        // select the item according to the saved order
                        var savedOrd = $("ul" + setSelector + ".ui-sortable").children("#" + itemID);

                        // remove all the items
                        child.remove();

                        // add the items in turn according to saved order
                        // we need to filter here since the "ui-sortable"
                        // class is applied to all ul elements and we
                        // only want the very first!  You can modify this
                        // to support multiple lists - not tested!
                        $("ul" + setSelector + ".ui-sortable").filter(":first").append(savedOrd);

                }
        }
}

        // here, we allow the user to sort the items
        $(setSelector).sortable({
                cursor: 'move',
                items: 'li',
                //axis: "y",
                opacity: 0.6,
                //revert: true,
                scroll: true,
                scrollSensitivity: 40,
                placeholder: 'highlight',
                update: function() { getOrder(); }
        });

        // here, we reload the saved order
        restoreOrder();

它只是不保存,我可以排序和一切。这是我的标记。我试着保持一切简单,以便进行测试。

<ul id="sortable">
 <li>test 1</li>
 <li>test 2</li>
</ul>

我可以更正此代码,以便在刷新时保存cookie并重新加载保存的设置。我非常渴望这个:))

谢谢!

1 个答案:

答案 0 :(得分:0)

您需要为每个<li>

添加ID

例如:

   <ul id="sortable">
 <li id="item-1">test 1</li>
 <li id="item-2">test 2</li>
   </ul>

另外,请务必使用});

关闭代码