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

Question

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

它尝试了这样的事情:

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

还有这个:

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

和:

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

和:

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

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

任何人都可以告诉Ne 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

我正在调试过程中:

1. 单击以进行排序
2. 完成(可排序禁用)
3. 点击以使再次排序无法正常工作
4. 解决方案/解决方法:将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

谢谢米哈尔

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

至少对我很有用！

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