JQuery UI Draggable, Can't drag out of a twitter bootstrap tab

Question

I have a droppable outside of a twitter bootstrap tab. It's in a parent row (but I don't think that's the issue). I can't drag my draggable outside of the tab to the droppable. The draggable is constrained within the tab even after changing the zIndex. If its not the zIndex than I have no idea what to persue.

Here's a contrived fiddle of my problem: fiddle

Answer 1

Notice that the drop gets triggered correctly when you ignore the visual of the box being cut off. So, this is just a display issue:

A parent of the draggable box, .tab-content, is set to overflow: auto, which hides elements outside of its bounds and adds scrollbars. Change it to overflow: visible and it works properly.