Question

我正在使用此代码使用jquery-ui保存已排序div的位置。

代码效果很好，但我的问题是......一旦保存，我怎样才能将它们重新加载到位？

这是我用来保存到职位的代码：

<div id="sortable">
    <div id="2000"></div>
    <div id="1000"></div>
    <div id="3000"></div>
</div>

$('#sortable').sortable({
    update: function () { save_new_order() }
});

function save_new_order() {
    var a = [];
    $('#sortable').children().each(function (i) {
        a.push($(this).attr('id') + ':' + i);
    });
    var s = a.join(',');
    alert(s);
    localStorage.setItem("positions", s);
}

我如何加载？

Answer 1

您可以检索该值并更新订单，如下所示。请注意，我使用内置的toArray方法来检索订单：

$(function() {
  var $sortable = $('#sortable');
  var positions = JSON.parse(localStorage.getItem('positions'));
  if (positions) {
    $.each(positions, function(i, position) {
      var $target = $sortable.find('#' + position);
      $target.appendTo($sortable); // or prependTo for reverse
    });
  }

  $sortable.sortable({
    update: saveNewOrder
  });

  function saveNewOrder() {
    var positions = JSON.stringify($sortable.sortable("toArray"));
    localStorage.setItem('positions', positions);
  }
});

JSFiddle demo

jQuery UI可排序 - 加载位置

1 个答案: