jQuery - Drag a object to a droppable object after the object hover a sortable object

See more:

jQuery

jQuery-UI

Hi,
I am using 2 sortable objects and 1 droppable object.
The 2 sortable are connected using "connectWith" property.

Click here to see a image example.

The idea is that i will drag objects from the bottom sortable to the upper sortable or to the droppable object.

The problem is that when i am dragging a object from the bottom sortable to the draggable object, the second sortable get it instead of the draggable object.
This is happen only if my mouse is hover the second sortable in the way to the draggable.

As you can see in the attached image if I am dragging the object using the orange path and drop it in the droppable object it will land in the second sortable object and not in the droppable object.
But, if I am dragging the object using the green path and drop it
in the droppable object it will land in the droppable object as it needed to work.

What that i already try to do is:
The 2 sortable are connected using the "connectWith" property. I try to change the property
on the air when the mouse is out from the second sortable but its not fixing it, the change apply only in the next time that i drag a object and not when a object is in dragging mode.

I made also a example on jsFiddle

Thanks!

Click here to see a image example.