Jquery ui - can not seem to drag my draggable objects onto an empty li sort

Question

I have a list that I call #gallery, in which I defined a pair of li boxes.

eg.

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

and the field they fall into ...

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

With the following js

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

When my list of condition fields is empty, as you can see now, I can drag boxes, but they don’t “stick”, only when I put the existing li in the code of the condition window, it really works. However, I do not want to do this. If you want to play, you can see below. Any ideas?

ref - http://jsfiddle.net/wmitchell/zCDE7/2/

Answer 1

, height conditions-box. css, :

#conditions-box {
  height: 40px;
}

Answer 2

dropOnEmpty , , , , , , .