Drag drop problem with Fixed position element.

Drag drop problem with Fixed position element.

Hi there,

I have a table with droppable cells, and a fixed position div that sits over the top of the table (see pic below).

What i'm trying to do is have a draggable div that gets picked up from the fixed position div and drop into any of the cells in the table. The problem is that the droppables are triggered when the draggable is still within the fixed position div.

The screenshot below is taken while dragging the 'draggable div', you'll notice that the hoverclass (dashed border) is showing up on the table cell, which is underneath the fixed position div. The draggable div starts inside the fixed position div. I dont want the draggable div to be able to be dropped on the table cells while it is still over the fixed position div.

Is this possible? I have tried using stopPropagation, playing with z-indexes, tried absolute & relative positioning on the fixed position div, and also setting the fixed position div as droppable also with the 'greedy' attribute, but no luck. Anyone have any ideas?

Edit: Here's the sample code: http://jsbin.com/enupa3/edit