0

如何在 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>
4

2 回答 2

0

好吧，如果您只需要记住顺序，您可以将逗号分隔的 id 字符串插入 cookie 中？并在页面加载时将它们拉回来。

据我所知，序列化仅适用于表单数据，不适用于 DOM 元素。

为了解决您的评论，您将使用简单的 jquery 从页面构建一个 CSV：

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

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

把事情恢复原状有点困难。如果您将字符串发送回服务器，则以正确的顺序输出内容会简单得多......但是您可以使用 jquery 中的 DOM 工具来移动 DOM 对象。无论哪种方式都足够简单。

于 2009-05-25T09:23:46.277 回答
0

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

  1. 列表容器
  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

我忘记了我是从哪里得到它的（谷歌搜索时出现的一些论坛或博客）......但应归功于原作者。我通过接受这些参数对原始例程进行了一些修改，以使其更易于重用。

干杯，微观世界^地球

于 2009-05-26T08:53:35.183 回答