Question

如何在div中保存元素位置？

我是否使用序列化？如果是，我该怎么做？

我有这个div：

<div id="produtlist">
    <img id="productid_10" src="images/pic10.jpg" class="sortableproduct" alt="" title="" />
    <img id="productid_11" src="images/image1.jpg" class="sortableproduct" alt="" title="" />
    <img id="productid_12" src="images/image2.jpg" class="sortableproduct" alt="" title="" />
    <img id="productid_13" src="images/pic1.jpg" class="sortableproduct" alt="" title="" />
    <img id="productid_14" src="images/pic2.jpg" class="sortableproduct" alt="" title="" />
    <img id="productid_15" src="images/pic3.jpg" class="sortableproduct" alt="" title="" />
</div>

Answer 1

如果您只需要记住订单，那么您可以将逗号分隔的ID字符串打包到Cookie中吗？并在页面加载时将它们拉回来。

据我所知，Serialize仅适用于表单数据，而不适用于DOM元素。

要解决您的评论，您可以使用简单的jquery从页面构建CSV：

var list = '';
$('#productlist .sortableproduct').each(function() {
    list += this.attr('id') + ',';
});

然后将列表保存到cookie，或将其发送回服务器。

把东西放回原处是有点困难的。如果您将字符串发送回服务器，那么以正确的顺序输出内容会简单得多......但您可以使用jquery中的DOM工具来移动DOM对象。两种方式都很简单。

Answer 2

我在我的一个项目中使用了类似的功能，我已准备好一段代码来恢复排序。该函数有两个参数：

列表容器
包含逗号分隔ID的Cookie。

我用它来重新排序基于ul的列表，但在你的情况下也可以正常工作......

// Function that restores the list order from a cookie
function restoreOrder( _list, _cookie ) {

    var list = $( '#' + _list );
    if( list == null ) return;

    // fetch the cookie value (saved order)
    var cookie = $.cookie( _cookie );

    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 = $( '#' + _list ).children( '#' + item );

            // select the item according to the saved order
            var savedOrd = $( '#' + _list ).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!
            $( '#' + _list ).filter( ':first' ).append( savedOrd );

        } // if

    } // for

} // restoreOrder

我忘记了我从哪里获得它（谷歌搜索时出现的一些论坛或博客）......但是对原作者应有的信用。我已经修改了原始例程，以便通过接受这些参数使其更具可重用性。

干杯，微观^世人

jquery保存元素位置（序列化？）

2 个答案: