如何在JQuery Sortable中执行重置操作

Question

我正在使用JQuery Sortable插件。 我想知道是否可以在多次排序后将可排序控件恢复到其原始状态，类似于表单重置。 “取消”选项似乎只影响最后一次排序尝试，而不是所有排序。

- HugeBob

---

也许将默认顺序存储在数据属性中？ - wirey00

Answer 1

我个人喜欢用这种方式来做：

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

重置时

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

我尝试过使用.clone()、.children() 以及 $("#sortable > *)，但发现缓存 .html() 是最好的选择。

在我的情况下，我有两个关联的列表。一个包含用户可以排序或删除的当前项目，另一个是可用项目列表，用户可以从中获取并添加到“当前项目”列表。我需要一种方法将所有内容重置为原始状态。以上方法非常有效。

- Captain Betty

---

如果您的源有多个基于类的列表，则此解决方案将无法正常工作。我正在使用两个列表来提供数据，其中我的选择器是一个类。很遗憾没有官方的“重置”功能，可以知道每个项目的来源并返回。 - Antony

Answer 2

这是一个简单的方法

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

- Luan D

---

这将仅撤消最后一次排序更改。如果我对多个进行排序，然后执行此操作，则无法为所有排序执行此操作。 - Redmega

Answer 3

存储原始元素顺序的引用，然后使用它来重新排序它们。

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

现在，当您想恢复原始排序顺序时，只需将div附加到#sortable元素即可。

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

- Kevin B

Answer 4

在文档准备好时，您可以缓存父元素的副本，并在重置时恢复它。

例如，如果您的可排序元素是 <ul class="parent">：

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

重置时，您可以执行以下操作：

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

- techfoobar