javascript - jQuery sortable 仅适用于文档就绪，不适用于按钮

Question

查看以下 jsFiddle：

http://jsfiddle.net/PNvvb/1/

我使用可排序的 div，其中包含项目。这些项目是可排序的，并使用 jQuery UI Sortable 插件。当我实例化document.ready函数中的项目时，一切都按预期工作。

但是，一旦您单击禁用并再次启用按钮，该sortable插件就不再起作用了。

当您只使用按钮并sort(true)从document.ready.

为什么 jQuery UI sortable 在 DOM 层次结构已经完全构建并触发 ready 函数时可以工作，但在此之后调用时不起作用？

HTML：

<div id="sort">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
</div>

<button id="b1">Enable</button>
<button id="b2">Disable</button>

CSS：

.item {
    display:block;
    background-color: Yellow;
    width: 100px;
    margin: 5px
}

.placeholder { 
    background-color: Green;   
    width: 100px;
}

Javascript：

$(document).ready(function() { 
    sort(true); //Remove this line to see if the enable button works from the start. (which it doesn't)


    //These lines are needed for jsFiddle to get buttons to respond to clicks. See http://stackoverflow.com/questions/5431351/simple-example-doesnt-work-on-jsfiddle
    $("#b1").click(function() {
        sort(true);
    });
    $("#b2").click(function() {
        sort(false);
    });
});

function sort(enable) {
    if(enable) {
        $("#sort").sortable({ 
            placeholder: "placeholder",
            forcePlaceholderSize: true
        });   
    } else {       
        $("#sort").sortable({ disabled: true });   
    }
}

Answer 1

小提琴

function sort(enable) {

  if(enable) {

    $("#sort").sortable({ 
       placeholder: "placeholder",
       forcePlaceholderSize: true
    });   

  } else {

    $("#sort").sortable({ disabled: true });   

  }

}

$(function() { 

  $("#b1").click(function() {
    $("#sort").sortable({ disabled: false });  
  });
  $("#b2").click(function() {
    $("#sort").sortable({ disabled: true });  
  });

});

Answer 2

没关系..自己找到了答案：

我只需要将禁用的设置回false！

$("#sort").sortable({ 
            placeholder: "placeholder",
            forcePlaceholderSize: true,
            disabled: false
        });   

Answer 3

你没有更新disabled属性！

$("#sort").sortable({ 
    placeholder: "placeholder",
    forcePlaceholderSize: true,
    disabled: false
});