jquery ui-似乎无法将我的Draggables拖到空的可排序li上

我有一个列表,我称之为图库,其中我定义了两个li框。

例如

 <ul id="gallery">
   <li style="display: list-item; ui-draggable">A</li>
 </li>

一个盒子把它们放进…

<div id="conditions-box" class="ui-droppable">      
    <ul class="gallery ui-helper-reset ui-sortable"></ul>    
</div>

使用以下JS

$('#conditions-box > ul').sortable();
$("#gallery > li").draggable({
   connectToSortable: '#conditions-box > ul',
   helper: 'clone'
});

当我的条件框列表为空时(如您现在看到的),我可以将这些框拖进去,但只有当我将一个现有的LI放入条件框代码中时,它们才会“粘”起来,这确实有效。但是我不想这样做。如果你想看一个剧本,你可以在下面看到。有什么想法吗?

参考文献 http://jsfiddle.net/wmitchell/zCDE7/2/