Question

I have the following sortable order as the default

<ul id="sortable">
<li id="1">Item 1</li>
<li id="2">Item 2</li>
<li id="3">Item 3</li>
</ul>

But let’s say that a user move item 3 to position 1 then I save it to the database and now the new position is 3,1,2

When they access the page to edit I put the new order to this div

<div id="position">3,1,2</div>

But I don’t know how to re-order the sortable when the page load using the new position from id=”position” I’ve look at all the methods of sortable but can’t find the one to do it.

$( "#sortable" ).sortable();

Answer 1

Try this:

var orderArray = $('#position').text().split(',');
var listArray = $('#sortable li');
for (var i = 0; i < orderArray.length; i++) {
   $('#sortable').append(listArray[orderArray[i]-1]);
}​

jsFiddle example.