title: Jquery-ui.  Trouble using "draggable", "sortable", and "tabs" together
body: <p>I started out with this working drag and drop example <a href="http://jsbin.com/odiqi3/edit#javascript,html,live" rel="nofollow">here</a>.</p>
  
  <p>It works great however when I try to place the drop regions within tabs(<a href="http://jsbin.com/izuvih/edit#javascript,html,live" rel="nofollow">Here</a>) it seem to break.  It stops working when I try to drop an item on the "sortable 2" tab.</p>
  
  <p>Hope this makes sense.</p>
  
  <p>The HTML looks like this:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li id="draggable" class="ui-state-highlight"&gt;Drag me down&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="tabs"&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#tabs-1"&gt;Sortable 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tabs-2"&gt;Sortable 2&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;div id="tabs-1"&gt; 
      &lt;div class="ui-state-default"&gt;Item 13&lt;/div&gt;
      &lt;div class="ui-state-default"&gt;Item 23&lt;/div&gt;
      &lt;div class="ui-state-default"&gt;Item 3&lt;/div&gt;
      &lt;div class="ui-state-default"&gt;Item 4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="tabs-2"&gt;  
      &lt;div class="ui-state-default"&gt;Item 1&lt;/div&gt;
      &lt;div class="ui-state-default"&gt;Item 2&lt;/div&gt;
      &lt;div class="ui-state-default"&gt;Item 3&lt;/div&gt;
      &lt;div class="ui-state-default"&gt;Item 4&lt;/div&gt;
    &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>and the JavaScript:</p>
  
  <pre><code>$("#tabs").tabs();
  
  $("#tabs-1, #tabs-2").sortable({
    revert: true
  });
  $("#draggable").draggable({
    connectToSortable: '#tabs-1, #tabs-2',
    helper: 'clone',
    revert: 'invalid'
  });
  $("ul, li").disableSelection();
  </code></pre>