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

Question

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

这是JS小提琴：

<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

你是否错误配置了给定的小提琴？它缺少jquery-ui插件。