如何使用可排序的 jQueryUI 关闭排序？答案

【问题标题】：How to turn off sorting with jQueryUI sortable?如何使用可排序的 jQueryUI 关闭排序？
【发布时间】：2010-11-13 05:30:11
【问题描述】：

我已经实现了 jQueryUI 可排序列表，它工作得非常好。在某个时间点，我希望禁用进一步排序并保持项目顺序不变，而用户无法更改它。

它尝试过这样的事情：

$('.sortable').sortable('disable');

还有这个：

$('.sortable').each(function() { $(this).sortable('disable'); });

和：

$('.sortable').disable();

和：

$('.sortable').cancel();

以及所有这些的各种组合。都没有成功。

谁能告诉 ne 正确的方法™ 这样做吗？

更新：我正在使用 jQuery 1.3.2 和 jQueryUI 1.7.2。一个可能的问题是我在页面上有两个独立的可排序列表，所以我有 sortable1 和 sortable2 类。我实际上在做：

$('.sortable2').sortable('disable');

Update2：问题是我使用 .sortable 而不是 #sortable。现在一切正常。

【问题讨论】：

很奇怪。文档说.sortable('disable')docs.jquery.com/UI/Sortable#method-disable
第一种方式是documentation中给出的例子。我刚刚用我自己的一个项目对其进行了测试，它运行良好。您使用的是哪个版本的 jQuery 和 jQuery UI？我分别有 1.3.2 和 1.7.2。
第一种方式是[文档][1]中给出的示例。我刚刚用我自己的一个项目对其进行了测试，它运行良好。您使用的是哪个版本的 jQuery 和 jQuery UI？我分别有 1.3.2 和 1.7.2。 [1]：jqueryui.com/demos/sortable/#method-cancel
“The Right Way”商标+1。

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

【解决方案1】：

$(ui.sender).sortable( "disable" )

【讨论】：

【解决方案2】：

我正在调试中：

点击可排序
完成（可排序禁用）
点击重新排序不起作用
解决方案/解决方法：将禁用选项显式设置为 false

http://plnkr.co/edit/uX6cNNiYoejYqwQicEhg?p=preview

  function sortableEnable() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).sortable( "option", "disabled", false );
    // ^^^ this is required otherwise re-enabling sortable will not work!
    $( "#sortable" ).disableSelection();
    return false;
  }
  function sortableDisable() {
    $( "#sortable" ).sortable("disable");
    return false;
  }

希望对您有所帮助。

【讨论】：

【解决方案3】：

谢谢米哈尔

我为可排序或可编辑的列表制作了一个版本。

至少对我很有用！

    function sortableEnable() {
        $( "ul" ).sortable();
        $( "ul" ).sortable( "option", "disabled", false );
        $( "li" ).attr("contentEditable","false");
        $( "li" ).css("cursor","move");
        return false;
    }

  function sortableDisable() {
        $( "ul" ).sortable("disable");
        $( "li" ).attr("contentEditable","true");
        $( "li" ).css("cursor","default");
        return false;
    }

    $(function() {
        sortableEnable();
    });

【讨论】：

并在内容可编辑时隐藏蓝色边框，使用以下 css 样式： [contenteditable]:focus { outline: 0px solid transparent; }

【解决方案4】：

虽然我之前的建议帖子很有用，但它们并没有解决我想要实现的目标。我想打开和关闭跨多个区域的可排序，并添加使内容再次可选择的能力。

这是我使用的代码：

function AddSortable() {

    $("ul").sortable({
        connectWith: "ul",
        disabled: false
    }).disableSelection();  

    return false;
};

function RemoveSortable(){

    $("ul").sortable({ 
        disabled: true 
    }).enableSelection();   

    return false;
}

【讨论】：

sortable('disabled') 对我不起作用，但具有 disabled:true 的对象确实起作用。
contentEditable有什么用？
完美，谢谢（y）

【解决方案5】：

如果您想禁用所有可排序（如我所愿），那么您可以使用可排序类“ui-sortable”作为选择器。

例如

$(".ui-sortable").sortable("enable");
$(".ui-sortable").sortable("disable");

【讨论】：

【解决方案6】：

$( ".selector" ).sortable( "disable" );

来自http://api.jqueryui.com/sortable/#option-disabled

【讨论】：

【解决方案7】：

要禁用sortable()，您可以使用

$(".sortable").sortable("disable");

单击 ID 为 toggleButton 的按钮来切换启用/禁用

$('#toggleButton').click(function() {
    //check if sortable() is enabled and change and change state accordingly
  // Getter
  var disabled = $(".sortable").sortable( "option", "disabled" );
  if (disabled) {
    $(".sortable").sortable( "enable" );
  }
  else {
    $(".sortable").sortable("disable");
  }
});

【讨论】：