title: jQuery drag and drop - Allow only one item in list
body: <p>I work with this example from <a href="http://jqueryui.com/demos/sortable/#empty-lists" rel="nofollow"><strong>jQuery UI Sortable</strong></a></p>
  
  <p>I have a problem with drag and drop.<br>
  Table number 3 - <code>sortable3</code> should only be able to receive one item.</p>
  
  <p>This is my HTML</p>
  
  <pre><code>&lt;div class="demo"&gt;
  
  &lt;ul id="sortable1" class='droptrue'&gt;
      &lt;li class="ui-state-default"&gt;Can be dropped..&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;..on an empty list&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='dropfalse'&gt;
      &lt;li class="ui-state-highlight"&gt;Cannot be dropped..&lt;/li&gt;
      &lt;li class="ui-state-highlight"&gt;..on an empty list&lt;/li&gt;
      &lt;li class="ui-state-highlight"&gt;Item 3&lt;/li&gt;
      &lt;li class="ui-state-highlight"&gt;Item 4&lt;/li&gt;
      &lt;li class="ui-state-highlight"&gt;Item 5&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul id="sortable3" class='droptrue'&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My CSS</p>
  
  <pre><code>#sortable1, #sortable2, #sortable3{
      list-style-type: none; 
      margin: 0; 
      padding: 0; 
      float: left; 
      margin-right: 10px; 
      background: #eee; 
      padding: 5px; 
      width: 143px;
  }
  
  #sortable1 li, #sortable2 li, #sortable3 li{
      margin: 5px; 
      padding: 5px; 
      font-size: 1.2em; 
      width: 120px; 
  }
  </code></pre>
  
  <p>My Script</p>
  
  <pre><code>$(function() {
      $("ul.droptrue").sortable({
          connectWith: "ul"
      });
  
      $("ul.dropfalse").sortable({
          connectWith: "ul",
          dropOnEmpty: false
      });
  
      $("#sortable1, #sortable2, #sortable3").disableSelection();
  });​
  </code></pre>