Cannot get jQuery-UI Tabs to work properly within a Sortable object

Cannot get jQuery-UI Tabs to work properly within a Sortable object

I believe that this is a bug within jQuery-UI and am prepared to submit it unless somebody can spot an issue with my code that would make this user error.

Visit this fiddle.

Attempt the following steps:

  1. Drag the green block straight down. Note that you must drag it past the 3rd blue block before the placeholder will appear.  Return the green block back to the top.

  2. Change to "Tab 2". Drag the green block straight down once again. Note that now you only need to drag the green block past the 1st blue block before the placeholder appears.  The length of the hidden tab is *exactly* the length that you must drag the green block down before you can drop it.

  3. You can also experiment by dragging the blue blocks onto or off of the tabs in order to lengthen/shorten the height on either tab. In all cases, the height of the hidden tab ALWAYS dictates how far down you must drag the green block before being allowed to drop. You could, alternatively, experiment by dragging the green block 2-3 inches to the right before dragging it down. This also avoids the phantom tabs overlay.

For my needs, the user must be able to drag those blocks into either the main sortable area (where the first few blue blocks are) or onto the sortable areas of either tab.  They must *ALSO* be able to freely drag items on and off of the tabs to the main sortable area.

Thanks for any assistance that you can provide!