Jquery 使用Sortable和cookie从cookie中获取已排序的div

下午好,

当重新加载页面时，我在从cookie读取值时遇到了一些问题

在切换div时，我可以使用以下代码将cookie值设置为“ordering”：

$(function()
        {
            $("#sort").sortable({
                containment: "parent",
                placeholder: "ui-state-highlight",
                opacity: 0.7,
                cursor: "move",
                update: function(event, ui) {
                    $.cookie("ordering", $('#sort').sortable("toArray"), {expires: 365, path: '/'});
                }
            });
        });

在更改div和cookie中的顺序后，我检查了cookie

但是，当我加载页面时，div处于其原始位置

我已查看并尝试实施此处建议的更改，当我查看Firebug时，它会抛出一个错误，说明：

错误：无法在初始化之前对sortable调用方法；试图调用方法“toArray” 抛出新的错误消息

我不太确定我会错在哪里

这是我用来读取cookie和设置新顺序的

function restoreOrder()
        {
            var list = $("#sort");
            var cookie = $.cookie("ordering");
            var cid = cookie.split(",");
            var items = list.sortable("toArray");
            console.log(cid);

            var rebuild = new Array();
            for (var v=0; len=items.length; v<len)
            {
                rebuild[items[v]] = items[v];
            }

            for (var i=0, n=cid.length; i<n; i++)
            {
                var iid = cid[i];
                if (iid in rebuild)
                {
                    var item = rebuild[iid];
                    var child = $("ul.ui-sortable").children("#" + item);
                    var savedOrd = $("ul.ui-sortable").children("#" + iid);
                    child.remove()
                    $("ul.ui-sortable").filter(":first").append(savedOrd);
                }
            }   
        }

        // code executed when the document loads
        $(function() {
            restoreOrder();
        });

无论我做什么，它都会抛出异常，不允许读取cookie

下面是一些有问题的div

<div id="iptc-sort">
            <div class="caption"><h3></h3><p>IPTC Information</p></div>
            <div class="contentbox">
                {iptc_info}
            </div>
            <div class="contentbottom"></div>
            <br/>
        </div>

        <div id="exif-sort">
            <div id="exifinfo" class="caption"><h3><i class="fa fa-fw fa-2x fa-plus-square-o"></i></h3><p>EXIF Information</p></div>
            <div id="exif" class="contentbox">
                {exif_info}
            </div>
            <div class="contentbottom"></div>
            <br/>
        </div>

        <div id="gmap-sort">
            <div id="mapinfo" class="caption"><h3><i class="fa fa-fw fa-2x fa-plus-square-o"></i></h3><p>Map Information</p></div>
            <div id="map" class="contentbox">
                <table width="100%">
                    <tr>
                        <td class="google">
                            <div id="map_canvas" class="map_canvas"></div>
                            {google_map}
                        </td>
                    </tr>
                </table>
            </div>
            <div class="contentbottom"></div>
            <br/>
        </div>

有什么简单的东西我遗漏了吗？我知道我必须更改child和savedOrd中使用的类的命名

---

提前谢谢

经过几个小时的调整，我终于修好了它

/* Set Cookie */
        var sortablelistSelector = "#sort";
        var sortablelistCookieName = "ordering";
        var sortablelistCookieExp = 365;
        function sortablelistOrder() 
        {
            $.cookie(sortablelistCookieName, $(sortablelistSelector).sortable("toArray"), {expires: sortablelistCookieExp, path: "/"});
        }
        function sortablelistRestoreOrder() 
        {
            var i, previousorder, cookie = $.cookie(sortablelistCookieName);
            if (!cookie)
            {
                return;
            }
            previousorder = cookie.split(',');
            for (i = 0; i < previousorder.length; i++)
            {
                $('#'+previousorder[i]).appendTo($(sortablelistSelector));
            }
        }

        /* Read Cookie */
        $(function()
        {
            $(sortablelistSelector).sortable(
            {
                cursor: "move",
                containment: "parent",
                placeholder: "ui-state-highlight",
                opacity: 0.7,
                update: function(event, ui)
                {
                    sortablelistOrder();
                }
            });
            sortablelistRestoreOrder();
        });