你如何对 JQuery 排序执行重置答案

【问题标题】：How do you perform a reset on a JQuery Sortable你如何对 JQuery 排序执行重置
【发布时间】：2026-01-29 20:05:02
【问题描述】：

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

【问题讨论】：

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

【解决方案1】：

这个方法很简单

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

【讨论】：

这只会撤消最后排序的更改。如果我对多个进行排序然后执行此操作，则不适用于所有这些

【解决方案2】：

我个人喜欢这样做：

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

重置时

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

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

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

【讨论】：

如果您有多个基于类的列表作为源，则此解决方案将不起作用。我正在使用 2 个列表来输入一个列表 - 我的选择器是一个类。遗憾的是没有官方的“重置”知道每个项目的来源可以返回。

【解决方案3】：

您可以在文档就绪时缓存父级的副本，并在重置时恢复它。

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

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

重置后，您可以：

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

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：