保存位置的可排序 div答案

【问题标题】：Sortable Divs That Save Locations保存位置的可排序 div
【发布时间】：2011-03-10 23:50:09
【问题描述】：

我正在尝试制作我的第一个 Firefox 扩展程序，它将新的标签页替换为更像 Chrome 的标签页。其中一项功能是“访问最多的网站”的磁贴，您可以拖放这些磁贴以重新排序。我让它们拖放，但我不知道如何保存 DIV 的新位置。

这是我正在使用的脚本：

$(document).ready(function(){
jQuery.fn.redswap = function(options){
    var selectedItems=this;
    redsettings = jQuery.extend({
         speed:"Medium",
         opacity:0.7
      }, options);
    $(selectedItems).mouseover(function(){
        $(selectedItems).disableSelection();
        $(selectedItems).droppable({
            drop: function(event, ui) {
                dropindex=$(selectedItems).index(this);
                var dragposition=$(selectedItems[dragindex]).position();
                var dropposition=$(selectedItems[dropindex]).position();

                withDifference=parseInt(dragposition.left)-parseInt(dropposition.left);
                heightDifference=parseInt(dragposition.top)-parseInt(dropposition.top);

                $(selectedItems[dropindex]).animate({
                    left:'+='+withDifference,
                    top:'+='+heightDifference
                },redsettings.speed,function(){

                });

                $(selectedItems[dragindex]).animate({
                    left:'+='+(withDifference*(-1)),
                    top:'+='+(heightDifference*(-1))
                },redsettings.speed,function(){
                    //Complete
                });


            },


        });

        $(this).draggable({ 
        opacity:redsettings.opacity, 
        helper: 'clone',
        containment: 'parent', 
        scroll: false,
        drag:function(event, ui){
                dragindex=$(selectedItems).index(this);
            }

        });

    });
    };

});

    // Settings

$(document).ready(function(){
    $("#wrapper").tabs();
    $("div[id*='box']").redswap({
        speed:'slow',
        opacity:.75
    });
});

这是我的 HTML：

<div id="1box" class="item">
    <a href="http://www.google.com/reader/view"><img src="thumbs/01.png" border="0" />
    <h1>Google Reader</a></h1><a href="#" class="x"></a><a href="#" class="tack"></a>
</div>
<div id="2box" class="item">
    <a href="https://mail.google.com/"><img src="thumbs/02.png" border="0" />
    <h1>Gmail</a></h1><a href="#" class="x"></a><a href="#" class="tack"></a>
</div>
<div id="3box" class="item">
    <a href="http://calendar.google.com/"><img src="thumbs/03.png" border="0" />
    <h1>Google Calendar</a></h1><a href="#" class="x"></a><a href="#" class="tack"></a>
</div>
<div id="4box" class="item">
    <a href="http://www.twitter.com/"><img src="thumbs/04.png" border="0" />
    <h1>Twitter</a></h1><a href="#" class="x"></a><a href="#" class="tack"></a>
</div>

HTML 还不是最终的，但它确实可以拖放。知道如何保存 DIV 的新顺序，以便当我关闭并再次打开它时，它是新配置吗？如果不能用这个脚本完成，那么我可以被指向一个新版本。

请记住，我对 JavaScript 非常陌生，所以请把我当作白痴：)

另外，如果您有兴趣帮助我进行编码方面的工作，请给我发消息。

【问题讨论】：

标签： javascript jquery firefox swap html

【解决方案1】：

听起来您正在寻找某种存储来包含您的序列信息。

Stack Overflow question 中讨论了适用于 Firefox 扩展的三种方法

我认为 SQLite 或文件系统选项都适合您的应用程序。

【讨论】：