How do you perform a reset on a JQuery Sortable

Question

I'm using JQuery Sortable. I'd like to know if it's possible to, after a number of resortings, restore the sortable control back to its original state similar to a form reset. The 'cancel' option only seems to affect the last sort attempt not all of them.

Answer 1

I personally like doing it this way:

$("#sortable").sortable({config...});
var cache = $("#sortable").html();

On Reset

$("#sortable").html(cache).sortable("refresh");

I tried using .clone() and.children() and even $("#sortable > *), but find caching the .html() the best option.

In my situation, I have two connected lists. One containing current items the user can sort or remove and another list of available items that the user can grab from to add to the "current item" list. I needed a way to reset everything to original state. The above works great.

Answer 2

this is simple way

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

Answer 3

Store a reference to the original element order then use that to re-order them.

var sortableElements = $("#sortable div");
$("#sortable").sortable();

Now when you want to restore the original sort order, simply append the divs to the #sortable element.

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

Answer 4

You can cache a copy of the parent on document ready and restore it on reset.

For example, if <ul class="parent"> is your sortable element:

var sortableCache;
$(document).ready(function() {
    ...
    $('ul.parent').sortable({ ... });
    ...
    sortableCache = $('ul.parent').clone(true);
});

On reset, you can do:

$('ul.parent').replaceWith(sortableCache);