Question

我已经实现了jQueryUI可排序列表，它的工作非常好。在某个时间点，我希望禁用进一步排序并按原样保留项目顺序，而无需用户更改它。

尝试过这样的事情：

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

和此：

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

和

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

和

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

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

任何人都可以告诉ne The Right Way ™吗？

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

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

Update2：问题是我使用.sortable而不是#sortable。现在一切都很好。

Answer 1

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

Answer 2

我正在调试过程中：

点击以进行排序
完成（可排序禁用）
点击以再次进行排序无法正常工作
解决方案/解决方法：将disabled选项设置为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;
  }

希望有所帮助。

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

Answer 4

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

以下是我使用的代码：

function AddSortable() {

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

    return false;
};

function RemoveSortable(){

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

    return false;
}

Answer 5

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

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

Answer 6

要停用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");
  }
});

Answer 7

第一种方式是documentation中给出的示例。我刚刚用我自己的一个项目进行了测试，它运行正常。您使用的是哪个版本的jQuery和jQuery UI？我分别有1.3.2和1.7.2。

Answer 8

如果要禁用所有可排序（我需要），那么您可以使用sortables类'ui-sortable'作为选择器。

e.g

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

如何使用jQueryUI排序关闭排序？

8 个答案: