Question

下午所有，

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

我可以使用以下代码在切换div时设置'ordering'的cookie值：

$(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处于原始位置。

我看过jQuery UI Sortable and Cookie并试图实现那里建议的更改，当我查看Firebug时，它会抛出一个错误说明：

“错误：在初始化之前无法调用sortable上的方法;尝试调用方法'toArray' 抛出新错误（msg）;“

不太确定我哪里出错了。

这是我阅读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

中使用的类的命名

提前致谢

Answer 1

经过几个小时的调整后，我设法解决了这个问题

/* 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();
        });

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

1 个答案: