Question

查看以下jsFiddle：

我使用了一个可排序的div，里面有项目。这些项是可排序的，并使用jQuery UI Sortable插件。当我在document.ready函数中实例化项目时，它都按预期工作。

但是，只要您再次单击“禁用”和“启用”按钮，sortable插件就不再有效了。

当您只使用按钮时，也会发生这种情况，并从sort(true)移除document.ready。

为什么jQuery UI可排序在完全构造DOM层次结构时起作用，并且触发就绪函数，但在此之后调用时不起作用？

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

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

我只需要将禁用设置为false！

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

Answer 2

您没有更新disabled属性！

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

Answer 3

Fiddle

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

});

jQuery sortable仅适用于文档就绪，而不是按钮

3 个答案: