Question

在代码中，第1项＆amp; item-2（第一列grid_3）可以更改，它将保存在cookie中但是item-3＆amp; item-4（列grid_3 last）不会 - 那么我该如何保存所有项目？

在线样本文件（演示）：

示例文件代码（直接）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <title>jQuery Test</title>

    <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://rapidshare.com/files/443222676/jquery.cookie.js"></script> <!-- TrafficShare -->
    <script type="text/javascript">
// set the list selector
var setSelector = ".column";
// 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 = $(".column.ui-sortable").children("#" + item);


            // select the item according to the saved order
            var savedOrd = $(".column.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!
            $(".column.ui-sortable").filter(":first").append(savedOrd);
        }
    }
}

// code executed when the document loads
$(function() { 
    // here, we allow the user to sort the items

    $(setSelector).sortable({
        connectWith: '.column',
        handle: 'header',
        cursor: 'move',
        revert: 500,
        opacity: 0.7,
        appendTo: 'body',
        placeholder: 'widget-placeholder',
        forcePlaceholderSize: true,
        start: function(event, ui) {
        },
        stop: function(event, ui) {
        },
        update: function(event, ui) {

            getOrder();

        }

    });

    // here, we reload the saved order
    restoreOrder();
});
</script>

</head>

<body>


<section class="grid_6 first top">
<div class="columns">

    <div class="column grid_3 first">

        <div class="widget" id="item-1">
            <header><h2>item-1</h2></header>
            <section>
            <dl>
                <dt>Lorem ipsum dolor sit amet</dt>
                <dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</dd>
            </dl>
            </section>
        </div>

        <div class="widget" id="item-2">
            <header><h2>item-2</h2></header>
            <section>
            <dl>
                <dt>Lorem ipsum dolor sit amet</dt>
                <dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</dd>
            </dl>
            </section>
        </div>

    </div>

    <div class="column grid_3 last">

        <div class="widget" id="item-3">
            <header><h2>item-3</h2></header>
            <section>
            <dl>
                <dt>Lorem ipsum dolor sit amet</dt>
                <dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</dd>
            </dl>
            </section>
        </div>

        <div class="widget" id="item-4">
            <header><h2>item-4</h2></header>
            <section>
            <dl>
                <dt>Lorem ipsum dolor sit amet</dt>
                <dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</dd>
            </dl>
            </section>
        </div>

    </div>

</div><div class="clear">&nbsp;</div>
</section>




</body>
</html>

jQuery可排序问题（Cookie）

0 个答案: