How do you perform a reset on a JQuery Sortable

问题

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.

回答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.

回答2:

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

回答3:

this is simple way

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

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

来源：https://stackoverflow.com/questions/13846662/how-do-you-perform-a-reset-on-a-jquery-sortable