jquery - 你如何对 JQuery 排序执行重置

Question

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

Answer 1

我个人喜欢这样做：

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

重置时

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

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

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

Answer 2

这是简单的方法

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

Answer 3

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

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

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

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

Answer 4

您可以在准备好的文档上缓存父级的副本，并在重置时将其恢复。

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

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

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

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