Javascript HTML/jQuery保存顺序

我正在使用名为shapeshift的jquery插件。这就像jqueryui一样，但是有更好的动画。可以拖放div。但我似乎不知道如何保存他们的订单，以便在浏览器refesh上的订单与我留下的订单保持一致

这是JSFIDLE

我正在启动上述插件

请帮我拉小提琴。

---

谢谢

正如评论者所建议的，您需要使用

localStorage

存储和检索状态，并在

ss drop complete

事件后保存该状态

以下是我在本文中使用的整个JS：

$（函数（）{
//如果存在已保存状态，则从本地存储检索
var saved=localStorage.getItem（'arrangement'）；
如果（已保存）{
populateArrangement（$（'.container'）.parent（），JSON.parse（已保存））；
}
$（“.container”）.shapeshift({
最小列数：3
}).on（'ss-drop-complete'，函数（）{
//获取新排列并将其作为字符串序列化到localStorage
var rows=getArrangement（）；
setItem（'arrangement'，JSON.stringify（行））；
});
//返回将集合重建为数组所需的数据
函数getArrangement（）{
var行=[]；
$（'.container'）。每个（函数（）{
var elementsInRow=[]；
$（this）.find（'.ss active child'）。each（函数（）{
元素行。推({
值：parseInt（$（this）.text（），10），
colspan:$（this）.data（'ss-colspan'）|| 1
});
});
行。推送（元素行）；
});
返回行；
}
//使用排列正确填充DOM
功能填充安排（容器、新安排）{
$（container.find（'.container'）.remove（）；
$.each（新排列，功能（索引，行）{
变量$container=$（''）；
$container.appendTo（container）；
$.each（行、函数（索引、元素）{
变量$div=$（''）；
$div.text（元素值）；
如果（element.colspan>1）
$div.attr（'data-ss-colspan'，element.colspan）；
$container.append（$div）；
});
});
}
});

如果您有某种服务器端代码，您可以将订单添加到ss drop complete功能的隐藏字段中，然后在post back中将其发回服务器。然后，您可以在页面重新呈现时重新输出这些值，并且可以在需要的任何服务器端代码中使用这些信息

在使用jquery mobile和ASP.NET将订单保存回数据库时，我也做了类似的工作

---

如果没有，本地存储选项可能是一个很好的选择。

我会创建一个cookie。因此，我将首先包括jQuery Cookie脚本（在此处找到：），然后在每次移动元素时创建Cookie（每个

.container

）：

/* save cookie */
$('.container').on("ss-drop-complete", function() {
    var containerCookieCounter = 0;
    $('.container').each(function() {

        /* cookie = 12h */
        var date = new Date();
        date.setTime(date.getTime() + (720 * 60 * 1000));
        $.cookie('savepositions' + containerCookieCounter, $(this).html(), { expires: date, path: '/' });
        containerCookieCounter += 1;
    });
});

然后，在启动shapeshift功能之前，检查是否存在cookie：

/* cookies... */
if ($.cookie('savepositions0')) {
    var containerCounter = 0;
    $('.container').each(function() {
        $(this).html($.cookie('savepositions' + containerCounter));
        containerCounter += 1;
    });
}

这里有一把小提琴：

只有一个容器

---

在移动一些分区后是否有触发的事件？只需尝试在localstorage中保存分区的位置，并在页面刷新中检索这些值。@Goku是的，有。这是$containers。在“ss drop complete”上。@KartikeyaKhosla请帮我拉小提琴。从昨天起我就开始头痛-（这不会保存订单，是吗？@MarkRobbins你为什么不点击Fiddle链接看看它是否有效，而不是询问它是否有效？（顺便说一下，在我的浏览器中效果很好。）@Niffler，因为我通常可以阅读代码并告诉他，他并没有真正满足这里的要求。因此，这是一个修辞问题。当然，它似乎可以保存顺序，但它只是重新创建div。将图像放入那些div或html中，他的“解决方案”就会中断。感谢罗宾的回答。它可以工作，但遗憾的是，它只适用于一个容器。尽管如此，美联社我对你的能力非常有信心，你有能力找出两个迭代器函数来覆盖这些基础：）啊..我对javascript相当陌生，昨天刚开始学习localstorage。我不明白你想说什么。现在我看起来像个傻瓜。无论如何，如果你能在我的小提琴上帮助我，使它与多个容器兼容，我将投票/选择你的答案作为我的答案。就这样。谢谢你，罗宾！嘿你的代码正常，但有一些小故障。当顺序发生更改时，会将其保存。但当浏览器刷新时，div彼此重叠或不在其位置（网格）。发生什么事？

/* save cookie */
$('.container').on("ss-drop-complete", function() {
    var containerCookieCounter = 0;
    $('.container').each(function() {

        /* cookie = 12h */
        var date = new Date();
        date.setTime(date.getTime() + (720 * 60 * 1000));
        $.cookie('savepositions' + containerCookieCounter, $(this).html(), { expires: date, path: '/' });
        containerCookieCounter += 1;
    });
});

/* cookies... */
if ($.cookie('savepositions0')) {
    var containerCounter = 0;
    $('.container').each(function() {
        $(this).html($.cookie('savepositions' + containerCounter));
        containerCounter += 1;
    });
}

var $con=$(".container").shapeshift({
    minColumns: 3
});

function getPos(id){
   var p=localStorage[id]; 
    var ro={left:100000,top:-1,unknown:true};
    if(p!==undefined) ro=JSON.parse(p);
    //alert('get Pos:'+id+' '+JSON.stringify(ro));
    return ro;
}
function setPos(id,p){
    //alert('set Pos:'+id+' '+JSON.stringify(p));
   localStorage[id]=JSON.stringify(p); 
}
function arrange(){
    var o={};
    var con=$(".container:nth-child(1)");
    var els=$(".container:nth-child(1) div");
    els.each(function(x){
        var me=$(this);
        var id=me.attr('id');
        var o_=o[id]={};
        o_.id=me.attr('id');
        o_.p=getPos(id);
    });
    for(var i in o){
        var oo=o[i];
        var el=$('#'+oo.id);
        if(!oo.unknown){
          el.css('left',''+oo.p.left+'px');
        }
    }
}
function savePs(){
    var els=$(".container:nth-child(1) div");
    els.each(function(){
        var me=$(this);
        setPos(me.attr('id'),me.position());
    });    
}
var $con=$(".container:nth-child(1)");
$con.on('ss-rearranged',function(e,selected){
    var id=$(selected);
    setTimeout(function(){
        //var me=$(selected);
        savePs();
        //setPos(me.attr('id'),me.position());
    },500);
});
arrange();
//savePs();