jQuery UI draggable being dropped in droppable behind container

Question

I have an excel grid of droppables and a orphan container of draggables. The orphan container takes up 1/3 of the screen and is on top of the droppable excel grid in a fixed position so you can move around the droppable grid. I drag these items from the orphan container to a droppable bucket behind it. If I barely drag an item in the orphan container it sometimes goes behind it to the droppable containers and gets inserted. Is there a way not to do that, and just stay in the orphan container if it wasnt moved outside of it.

The image below shows the orphan container called unscheduled games. If I barely drag the B1 vs B2, it gets dropped in a smaller container behind it instead of staying in the orphan container. So it looks like it just disappears.

Update:

I noticed that both my droppables "drop" event are being hit. The orphan container gets hit, and then the second one gets hit, and the second one accepts it.

Answer 1

I fixed this by adding a class to the draggable item and removing it in the over/out events of the orphan container.

            over: function( event, ui ) {
                $(ui.draggable).addClass('orphan-droppable');
            },
            out: function (event, ui) {
                $(ui.draggable).removeClass('orphan-droppable');
            }

and testing if the element has it in the grid droppable, if the class was found on the element I ignore it.

 drop: function (event, ui) {

                        if (!$(ui.draggable).hasClass('orphan-droppable')) {
// Work on element
}