¿Cómo muevo un elemento a una lista vacía usando jquery?

Question

Estoy trabajando con una demostración de dos listas de jquery ordenables ... pero tengo un problema cuando una lista está vacía, ya no puedo arrastrar elementos sobre ella, porque no hay nada allí para colocar. Traté de agregar espacio al margen, relleno y altura de línea del ul, pero nada parece funcionar. ¿Algunas ideas?

<style type="text/css"> 
#sortable1, #sortable2 { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    float: left; 
    margin-right: 10px; 
} 
#sortable1 li, #sortable2 li { 
    margin: 0 5px 5px 5px; 
    padding: 5px; 
    font-size: 1.2em; 
    width: 120px; 
} 
</style> 
<script type="text/javascript"> 
$(function() { 
    $("#sortable1, #sortable2").sortable({ 
     connectWith: '.connectedSortable' 
    }).disableSelection(); 
}); 
</script> 

<ul id="sortable1" class="connectedSortable"> 
<li class="ui-state-default">Item 1</li> 
<li class="ui-state-default">Item 2</li> 
<li class="ui-state-default">Item 3</li> 
<li class="ui-state-default">Item 4</li> 
<li class="ui-state-default">Item 5</li> 
</ul> 

<ul id="sortable2" class="connectedSortable"> 
</ul> 

Answer 1

Establezca la propiedad dropOnEmpty en verdadero. Vea http://jqueryui.com/demos/sortable/#empty-lists para más información.

Answer 2

respuesta no funcionó para mí de Frederik

solución

para mí fue la de añadir un min-height al vacío ul

ref: http://rolleys.wordpress.com/2010/05/18/cant-get-jquery-sortable-to-drop-on-to-empty-lists/