jQuery可排序仅适用于文档，而不是按钮 [英] jQuery sortable only works in document ready, not with a button

问题描述

查看下面的jsFiddle：

http： //jsfiddle.net/PNvvb/1/

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

但是，只要你点击禁用，并再次启用按钮，排序插件不再工作。

这也发生在你只需使用按钮，然后从 document.ready 中移除 sort（true）。

为什么jQuery UI可排序在DOM层次结构完全构建时起作用，并且ready函数被触发，但在此之后调用时不起作用 p>

HTML：

 < div id =sort> 
< div class =item>第1项< / div> 
< div class =item>第2项< / div> 
< div class =item>第3项< / div> 
< div class =item>第4项< / div> 
< / div> 
 
< button id =b1>启用< / button> 
< button id =b2>停用< / button> 
  

CSS：

  .item {
 display：block; 
背景颜色：黄色; 
 width：100px; 
保证金：5px 
} 
 
 .placeholder {
 background-color：Green; 
 width：100px; 
 
  

Javascript：

  $（document）.ready（function（）{
 sort（true）; //删除此行以查看启用按钮是否从一开始就工作't）
 
 
 //这些行是jsFiddle获得按钮响应点击所需的。请参阅http://stackoverflow.com/questions/5431351/simple-example-doesnt-单击（函数（）{
 sort（true）; 
}）; 
 $（＃b2） .click（function（）{
 sort（false）; 
}）; 
}）; 
 
函数sort（enable）{
 if（enable）{
 $（＃sort）。sortable（{
 placeholder：placeholder，
 forcePlaceholderSize：true 
}）; 
} else {
 $（＃sort）。sortable（{disabled：true}）; 
 
 
 
 $ div $解析方案

你'没有更新禁用属性！

  $（＃sort ）.sortable（{
 placeholder：placeholder，
 forcePlaceholderSize：true，
 disabled：false 
}）; 
  




Check out the following jsFiddle:

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

I use a sortable div, with items in it. These items are sortable, and use the jQuery UI Sortable plugin. When I instantiate the items in the document.ready function, it all works as expected.

But as soon as you click disable, and enable button again, the sortable plugin does not work anymore.

This also happens when you just use the buttons, and remove the sort(true) from the document.ready.

Why does jQuery UI sortable do work when the DOM hierarchy has been fully constructed, and the ready function is triggered, but does not work when called after this?

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

解决方案

You're not updating the disabled property!

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

这篇关于jQuery可排序仅适用于文档，而不是按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！