estevan gomez estevan gomez - 8 months ago 85
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 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>

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(',');
localStorage.setItem("positions", s);

How can I load?


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

    update: saveNewOrder

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

JSFiddle demo