title: How do I move an item to an empty list using jquery?
body: <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>