Question

I have the following code:

<script>
$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});
</script>


<div class="demo">

   <ul id="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
    <li class="ui-state-default">Item 6</li>
    <li class="ui-state-default">Item 7</li>
   </ul>

</div>

When i first load page, the list is in this(first pic below) order(1 through to 7), then i move and change the order of the list(second pic below). Hit reload and the order reverts back to the original order. Is is possible to preserve the changed order of the lists.

thank you for the help

Answer 1

This is basically a question about how to store data in between page refreshes. It’s not something specific to jQuery UI. There are generally two main places you can store the necessary data:

1) A cookie
2) A database

If you want to maintain the order of the lists in the long-term, then you will need to use a database. If it’s just a short-term issue, then a cookie is likely the better of the two solutions because it’s a lot simpler and won’t require a bunch of AJAX requests.

HTML5 also offers local data storage, so you could accomplish the same thing with that. But it won’t be supported by all browsers.