estevan gomez estevan gomez - 5 months ago 61
Javascript Question

jQuery UI Sortable - Load Positions

I am using this code to save the position of the sorted div's with jquery-ui.

The code works great but my question is...how can I load them again into position once saved?

Here's the code I'm using to save to positions:

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


How can I load?

T J T J
Answer

You can retrieve the value and update the order as shown below. Note that I'm using the built in toArray method to retrieve the order:

$(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

Comments