Question

我正在尝试进行可排序的div设置，以保存布局。我在这方面显然做错了什么，或者遗漏了一些简单的东西。可排序工作正常，但保存和加载不能正常工作。当我刷新时，一切都恢复原状，应该保存所选择的布局。我有点使用jquery cookie插件，但我不想使用它。我希望有人可以帮助我。我在这里查看了很多帖子，但是没有找到能回答我问题的内容，谷歌是我的朋友，让我到了这一步。但现在我不知所措。

$(function() {
  $( '[id^="sortable"]' ).sortable({
    connectWith: '[id^="sortable"]',
    helper: "clone",
    appendTo: ".primary_container",
    update: function() {
        $( '[id^="sortable"]' ).children().each(function(){
            savePosition($(this).attr("id"));
        });
    }
  });
});

function savePosition(id){
  var el = $("#" + id);
  var container = el.parent().attr("id");
  var index = el.index();
  localStorage.setItem(id, JSON.stringify({ container:container, index:index }));
}

function loadPosition(id){
  var el = $("#" + id);
  var position = JSON.parse(localStorage.getItem(id));
  console.log(position);
  var container = "#" + position.container;
  var index = position.index;
  if(index == 0){
    $(container).prepend(el);
  }else if($(container).children().eq(index - 1).length == 0){
    $(container).append(el);
  }else{
    $(container).children().eq(index - 1).after(el);
  }     

}

$( '[id^="sortable"]' ).children().each(function(){
  loadPosition($(this).attr("id"));
});

链接到jsfiddle

Answer 1

想出来。

localStorage.setItem('positions', $("#" + id).sortable("toArray") );

需要更改为

localStorage.setItem(id, JSON.stringify({ container:container, index:index }));

并且

var position = JSON.parse(localStorage.getItem('positions'));

更改为

var position = JSON.parse(localStorage.getItem(id));

更新帖子以反映工作变更。

使用localStorage保存可排序div的位置/位置

1 个答案: