Jquery Sortable restore portlets to saved settings

Question

There are plenty of posts here and on the web regarding how to SAVE the state of jquery sortable list but what about restoring one?

In my case I'm organizing a page layout, not a list, so I will have a left and right column (or more).

Here is what I have done in the past (using php+smarty):

<div id="leftsort">
    {section loop=$leftSort name="ls"}
        {if $leftSort[ls]}{include file="index/sort/`$leftSort[ls]`.tpl"}{/if}
    {/section}
</div>
<div id="rightsort">
    {section loop=$rightSort name="rs"}
        {if $rightSort[rs]}{include file="index/sort/`$rightSort[rs]`.tpl"}{/if}
    {/section}
</div>

Each portlet has its own template file thats included. When I save the state of the sortable list I save the left and right column separate to make it easier to restore.

How would you restore the sortable list?

I would prefer a pure jquery way of doing it, example - having the portlets hidden on the page, pass a json array to the sortable list and on 'create' have it sort and display the portlets

$( ".selector" ).sortable({
   create: function(event, ui) { 
     -- load sortable positions in a json array --
     -- parse the array and move the hidden portlets into position --
     -- show portlets --
   }
});

For me specific code is not exactly required so any concepts or ideas are appreciated.

Thank you!

-- Thinking like: http://jsfiddle.net/8gYsy/

Answer 1

I've managed to code up my concept tho I do hope there are some more answers! http://jsfiddle.net/Qwjp9/

This would allow you to restore the saved positions based on a json array. All portlet elements would be loaded in a hidden div and moved. I added a save example too.

var cols=jQuery.parseJSON('{"col1":["p1","p2"],"col2":["p3"]}');
$( ".column" ).sortable({
    connectWith: ".column",
    create: function(){
        var colid=this.id;      
        var col=cols[colid];
        $.each(col, function(index, value) {
           $('#'+value).appendTo($('#'+colid));
        });
    }, 
    update: function() {
         $.get('saveSortable.php',
              {col: this.id, sort:$(this).sortable('toArray').toString()});
    }                       
});​

Answer 2

Working example at http://jsfiddle.net/veLhT/

Html code:

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ul>

jQuery code:

// store elements
var d=$('ul').html();
// alter data (in your case sort the data)
$('ul li').eq(2).remove();
// reset contents
$('ul').html(d);