保存订单

我将创建一个cookie。因此，我将首先包含jQuery Cookie脚本(在这里找到:https://github.com/carhartl/jquery-cookie/blob/master/src/jquery.cookie.js)，然后在每次移动元素时创建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;
    });
});

然后，在启动shapesshift -function之前，检查是否存在cookie:

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

这里是一个工作小提琴:http://jsfiddle.net/Niffler/FvUcQ/

只有一个容器

小提琴

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();    

小提琴

正如评论者所建议的，您需要使用localStorage来存储和检索状态，并在ss-drop-complete事件之后保存该状态。

这是我在这个更新的jsFiddle中使用的整个JS:

$(function () {
    // retrieve from localStorage if there is a saved state
    var saved = localStorage.getItem('arrangement');
    if (saved) {
        populateArrangement($('.container').parent(), JSON.parse(saved));
    }
    $(".container").shapeshift({
        minColumns: 3
    }).on('ss-drop-complete', function () {
        // get the new arrangement and serialise it to localStorage as a string
        var rows = getArrangement();
        localStorage.setItem('arrangement', JSON.stringify(rows));
    });
    // return the data needed to reconstruct the collections as an array of arrays
    function getArrangement() {
        var rows = [];
        $('.container').each(function () {
            var elementsInRow = [];
            $(this).find('.ss-active-child').each(function () {
                elementsInRow.push({
                    value: parseInt($(this).text(), 10),
                    colspan: $(this).data('ss-colspan') || 1
                });
            });
            rows.push(elementsInRow);
        });
        return rows;
    }
    // use the arrangement to populate the DOM correctly
    function populateArrangement(container, newArrangement) {
        $(container).find('.container').remove();
        $.each(newArrangement, function (index, row) {
            var $container = $('<div class="container"></div>');
            $container.appendTo(container);
            $.each(row, function (index, element) {
                var $div = $('<div></div>');
                $div.text(element.value);
                if (element.colspan > 1) 
                    $div.attr('data-ss-colspan', element.colspan);
                $container.append($div);
            });
        });
    }
});

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

我在使用jquery移动版和ASP时也做过类似的事情。. NET将订单保存回数据库。

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