javascript - jQuery UI 可排序 - 加载位置

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