How do you perform a reset on a JQuery Sortable

jquery jquery-ui-sortable
HugeBob picture HugeBob · Dec 12, 2012 · Viewed 8.7k times · Source

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

Captain Betty picture Captain Betty · Feb 13, 2013

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.

Related questions

jQuery UI Sortable, then write order into a database

I want to use the jQuery UI sortable function to allow users to set an order and then on change, write it to the database and update it. Can someone write an example on how this would be done?

Read More
Jquery sortable 'change' event element position

Is there way to get current position of helper being dragged on over new position ? $("#sortable").sortable({ start: function (event, ui) { var currPos1 = ui.item.index(); }, change: function (event, ui) { var currPos2 = ui.item.index(); } }); It seems that currPos1 and …

Read More
Using jQuery UI sortable with HTML tables

I want to output some data from the database in a HTML table, and I want the user to be able to reorder table rows. To achieve this, I used jQuery UI sortable, thus: <script> $(function() { $( "#sortable" ).sortable(); $( "#…

Read More