jQuery UI draggable being dropped in droppable behind container -

i have excel grid of droppables , orphan container of draggables. orphan container takes 1/3 of screen , on top of droppable excel grid in fixed position can move around droppable grid. drag these items orphan container droppable bucket behind it. if barely drag item in orphan container goes behind droppable containers , gets inserted. there way not that, , stay in orphan container if wasnt moved outside of it.

the image below shows orphan container called unscheduled games. if barely drag b1 vs b2, gets dropped in smaller container behind instead of staying in orphan container. looks disappears.

update:

i noticed both droppables "drop" event being hit. orphan container gets hit, , second 1 gets hit, , second 1 accepts it.

i fixed adding class draggable item , removing in over/out events of orphan container.

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

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

 drop: function (event, ui) {                          if (!$(ui.draggable).hasclass('orphan-droppable')) { // work on element }