Javascript 保存位置的可排序div
我正在尝试做我的第一个Firefox扩展,用一个更像Chrome的标签页取代新的标签页。其中一个功能是访问量最大的站点的平铺,您可以通过拖放来重新排序。我让他们拖放,但我不知道如何保存div的新位置 这是我正在使用的脚本:Javascript 保存位置的可排序div,javascript,jquery,firefox,swap,html,Javascript,Jquery,Firefox,Swap,Html,我正在尝试做我的第一个Firefox扩展,用一个更像Chrome的标签页取代新的标签页。其中一个功能是访问量最大的站点的平铺,您可以通过拖放来重新排序。我让他们拖放,但我不知道如何保存div的新位置 这是我正在使用的脚本: $(document).ready(function(){ jQuery.fn.redswap = function(options){ var selectedItems=this; redsettings = jQuery.extend({
$(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非常陌生,所以请像对待白痴一样对待我:
另外,如果您有兴趣在编码方面帮助我,请给我发一条消息。听起来您在寻找某种存储来包含序列信息 本文讨论了三种适用于Firefox扩展的方法 我认为SQLite或文件系统选项都适合您的应用程序