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

Answer 1

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 2

this is simple way

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

Answer 3

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);

Answer 4

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.