jquery ui - cant seem to drag my draggables onto an empty sortable li

I have a list which I call #gallery in which I've defined a couple of li boxes.

e.g.

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

and a box to drop them 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 conditions box list is empty as you see now I can drag the boxes in but they dont "stick" only when I place an existing li into the conditions box code does it actually work. However I dont want to have to do t开发者_C百科his. If you want a play you can see below. Any ideas ?

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

I think you need to set height for your conditions-box sortable. You can use css like:

#conditions-box {
  height: 40px;
}

Try adding the dropOnEmpty option to the sortable, even though the default should be true, it doesn't appear to be working, because it works when the sortable is not empty.