How do I move an item to an empty list using jquery?
<p>I'm working with a demo of two sortable jquery lists... but have a problem when one list is empty, I can no longer drag items onto it, because there is nothing there to drop on.  I tried adding space to the margin, padding and line-height of the ul, but nothing seems to work.  Any ideas?</p>

<pre><code>&lt;style type="text/css"&gt;
#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;
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
$(function() {
    $("#sortable1, #sortable2").sortable({
        connectWith: '.connectedSortable'
    }).disableSelection();
});
&lt;/script&gt;

&lt;ul id="sortable1" class="connectedSortable"&gt;
&lt;li class="ui-state-default"&gt;Item 1&lt;/li&gt;
&lt;li class="ui-state-default"&gt;Item 2&lt;/li&gt;
&lt;li class="ui-state-default"&gt;Item 3&lt;/li&gt;
&lt;li class="ui-state-default"&gt;Item 4&lt;/li&gt;
&lt;li class="ui-state-default"&gt;Item 5&lt;/li&gt;
&lt;/ul&gt;

&lt;ul id="sortable2" class="connectedSortable"&gt;
&lt;/ul&gt;
</code></pre>
