CODEWITHSUNDEEP
javascriptjqueryjquery-ui
user6295002
user6295002

Reputation:

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?

Upvotes: 0

Views: 1361

Answers (1)

T J
T J

Reputation: 43156

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

Upvotes: 1

Related Questions