如何使用jQueryUI sortable关闭排序？

Question

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

我尝试了这样的代码：

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

这个：

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

并且：

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

和：

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

尝试了各种不同的组合，但都没有成功。

有人可以告诉我The Right Way™吗?

更新：我正在使用jQuery 1.3.2和jQueryUI 1.7.2。可能的问题是页面上有两个独立的可排序列表，它们分别具有sortable1和sortable2类。实际上，我正在执行以下操作：

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

更新2：我使用了.sortable而不是#sortable，问题已经解决。

- Milan Babuškov

---

奇怪。文档说.sortable('disable') http://docs.jquery.com/UI/Sortable#method-disable - seth

第一种方法是在文档中给出的示例。我刚刚用自己的一个项目测试了它，它可以正常工作。你使用的jQuery和jQuery UI版本是哪个？我分别使用的是1.3.2和1.7.2。 - shuckster

第一种方法是文档中给出的示例。我刚刚用自己的项目进行了测试，它可以正常工作。您使用的jQuery和jQuery UI版本是哪个？我分别使用1.3.2和1.7.2。 - shuckster

+1 为 "The Right Way" 商标。 - Andy

Answer 1

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

- isxaker

Answer 2

我正在调试过程中：

1. 点击使其可排序
2. 完成（禁用排序）
3. 再次点击使其可排序没有起作用
4. 解决方案/解决方法：显式地将禁用选项设置为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;
  }

希望这有所帮助。

- Michal Stefanow

Answer 3

感谢 Michal

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

对我来说非常有用！

    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();
    });

- Chris Glasier

---

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

Answer 4

虽然之前的建议对我有所帮助，但它们并没有解决我的问题。我想要在多个区域之间打开和关闭可排序功能，并添加使内容可选的能力。

这是我使用的代码：

function AddSortable() {

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

    return false;
};

function RemoveSortable(){

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

    return false;
}

- Andi

---

sortable('disabled') 对我无效，但是一个带有 disabled:true 的对象有效。 - James Hilton

contentEditable 有什么用途？ - Bernhard Döbler

完美，谢谢 (y) - BJ Patel

Answer 5

如果你想禁用所有的拖拽排序（就像我一样），那么你可以使用sortable类“ui-sortable”作为选择器。

例如：

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

- VorTechS

Answer 6

将代码中的元素禁止拖放排序功能。

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

- isync

Answer 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");
  }
});

- Rahul Gupta