Jquery-ui. Trouble using “draggable”, “sortable”, and “tabs” together

Question

I started out with this working drag and drop example here.

It works great however when I try to place the drop regions within tabs(Here) it seem to break. It stops working when I try to drop an item on the "sortable 2" tab.

Hope this makes sense.

The HTML looks like this:

<ul>
  <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>

<div id="tabs">
  <ul>
      <li><a href="#tabs-1">Sortable 1</a></li>
      <li><a href="#tabs-2">Sortable 2</a></li>
  </ul>

  <div id="tabs-1"> 
    <div class="ui-state-default">Item 13</div>
    <div class="ui-state-default">Item 23</div>
    <div class="ui-state-default">Item 3</div>
    <div class="ui-state-default">Item 4</div>
  </div>
  <div id="tabs-2">  
    <div class="ui-state-default">Item 1</div>
    <div class="ui-state-default">Item 2</div>
    <div class="ui-state-default">Item 3</div>
    <div class="ui-state-default">Item 4</div>
  </div>  
</div>

and the JavaScript:

$("#tabs").tabs();

$("#tabs-1, #tabs-2").sortable({
  revert: true
});
$("#draggable").draggable({
  connectToSortable: '#tabs-1, #tabs-2',
  helper: 'clone',
  revert: 'invalid'
});
$("ul, li").disableSelection();

Answer 1

Looks there something wrong with jQuery 1.4 and/or jQuery-UI 1.8. If you play with this:

http://jsfiddle.net/ambiguous/jjmVt/

which uses jQuery 1.4.4 and UI 1.8.7, you'll see the same strange behavior that you're seeing (namely that you have to interact with the sortable after switching tabs before you can drag'n'drop again). But if you switch to jQuery 1.7.1 and UI 1.8.16:

http://jsfiddle.net/ambiguous/NRZ2U/

everything seems to work fine. So upgrade your way out of the problem.

I also switched the draggable to a <div> to avoid producing invalid HTML but that doesn't affect the strange behavior. I also replaced your id="draggable" with class="draggable" to, again, avoid invalid HTML but this doesn't affect the buggy behavior either.