使用 jquery ui 动态创建的可排序 div

Question

我正尝试在正在动态创建的 div 上启用可排序功能。我无法重现 jquery UI 中的示例。我错过了什么吗？

这是 JS Fiddle:

<div id="sortable">
</div>

<input type='button' id='btn' value='add'/>    

$(function(){
    var c = 1;
    $("#btn").click(function(){

        var d = $("<div/>");
        d.html(c++);
        d.addClass('d');

        $("#sortable").append(d);        
    });

    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});

#sortable{
    width: 300px;
    border:1px solid black;
    height:350px;
}

#sortable div 
{ 
    margin: 0 3px 3px 3px; 
    padding: 0.4em; 
    padding-left: 1.5em; 
    font-size: 1.4em; 
    height: 18px; 

}

/*#sortable li span {  }*/

.d{
     background-color:yellow;
     border:1px solid orange;
     height:20px;
}

http://jsfiddle.net/28jwu4y2/3/

Answer 1

您需要在每次添加新元素时刷新 sortable，

  $( "#selector" ).sortable( "refresh" );

见working fiddle

P.S

您是否错误配置了给定的 fiddle？它缺少 jquery-ui 个插件。