如何检查列表是否可排序？答案

【问题标题】：How to check if list is sortable?如何检查列表是否可排序？
【发布时间】：2012-07-20 22:26:14
【问题描述】：

如何检查特定列表是否可排序？喜欢$('#list').is(':sortable')...？

如果我们会使用

if ($('#list').sortable())

然后列表将再次可排序，而不检查它是否实际上是可排序的。

【问题讨论】：

Find elements which have jquery widgets initialized upon them 的可能重复项。只需使用data("sortable") 而不是data("fileupload")。

标签： javascript jquery jquery-ui jquery-ui-sortable

【解决方案1】：

如果列表已经是可排序的，那么它应该有类ui-sortable。

您可以使用if ($('#list').hasClass('ui-sortable')) 进行检查。

【讨论】：

如果页面从 db 中重新加载，其中 html 保存有附加的类，则它不起作用。然而，jebbie 建议的方法在从 db 重新加载页面时完美无缺。

【解决方案2】：

我刚刚发现，它的数据接口也可以工作：

if ($( '#sortable' ).data( 'sortable' )) {
    // sortable instance exists
}

【讨论】：

但我不得不说...我相信最新的 jQuery 版本，这不再起作用（我不得不将我最新项目中的所有这些代码实例更改为 css-class-detection）
检查.data("sortable") 不起作用，但.data("uiSortable") 可以。

【解决方案3】：

2012 年之后 jQuery 版本发生了变化，所以现在你可以写：

if ($( '#sortable' ).data( 'ui-sortable' )) {
    // sortable instance exists
}

或

if ($( '#sortable' ).is(':ui-sortable')) {
    // sortable instance exists
}

【讨论】：

【解决方案4】：

应用排序时，只需像这样向该元素添加一个虚拟类，

$( "#sortable" ).sortable();
$( "#sortable" ).addClass("antguider");

那么，如果你想检查元素是否可排序，那么像这样检查，

if($( "#sortable" ).hasClass("antguider")){
    alert("Already Sort Applied");
}

【讨论】：

当可排序小部件已经添加了“ui-sortable”类时，为什么还要添加一个额外的不需要的类？
如果将来的 sortable 版本有任何机会改变类名，这个解决方案仍然有效。
好吧，而不是使用我自己的类，我宁愿让我检查可配置的类，如果它改变，我只改变配置和 bam，再次工作.. 永远不要重新发明轮子，整洁简单的标记应该始终是目标

【解决方案5】：

我在 Safari（也许是其他人）中发现这些类不可靠。 'ui-sortable' 保留在任何已被设为可排序的项目上，即使您禁用它，这会导致类 'ui-sortable ui-sortable-disabled' 都被使用。

我发现自己添加和删除类只是为了确保它们符合我的预期。

if ($(this).hasClass("ui-sortable")) {
  $(this).removeClass("ui-sortable");
  $(this).sortable({ disabled: true });
}
else {
  $(this).addClass("ui-sortable");
  $(this).sortable({ disabled: false });
}

-- 编辑

好的，所以这些类是可靠的，但我所追求的不是禁用，而是 .sortable("destroy") 将元素返回到初始化之前的状态（即删除所有辅助类）。

所以对于我的可排序切换（这是我正在创建的）：

if ($(this).hasClass("ui-sortable")) $(this).sortable("destroy");
else $(this).sortable();

【讨论】：

【解决方案6】：

你可以在这里查看我的答案https://stackoverflow.com/a/57549308/4175975

只调用一个sortable的实例，如果返回undefined，则不加载

if (typeof $("ul.sortable").sortable('instance') != 'undefined') {
    //$.ui.sortable is loaded and called
} else {
    //call sortable
}

【讨论】：

【解决方案7】：

你也可以使用：

Sortable.get(element)

https://github.com/SortableJS/Sortable#sortablegetelementhtmlelementsortable

如果没有附加可排序实例，则解析为undefined。

【讨论】：