JQueryUI draggable/droppable get uppermost dropped div

Question

I am having a problem that is best illustrated by this Fiddle I stumbled upon:

http://jsfiddle.net/JSFU4/3/

This is, when I am draggind an object and hovering over its droppable counterpart, the drop is detected EVEN IF there is a div in between them. I want to avoid this.

From what I've understood reading the docs, there is no out-of-the-box solution to do it, but maybe an option could be to get the 'real' uppermost div in which the dragged element was dropped and avoid action if it is the overflown div. (This is just an idea though).

In other words, say I have a droppable div called droppable-div, a div that is on top of it called on-top-non-droppable-div... could I detect this in the dropped function?

dropped: function(ev, ui){
    // somehow detect if the first target to receive the draggable event
    // is #on-top-non-droppable-div, and don't do anything if it is.
}

Answer 1

Maybe that's fitting your needs:

$(function () {
    $('.drag').draggable();
    $('.drop, .overlay').droppable({
        tolerance: 'touch',
        hoverClass: 'drop-hover',
        accept: '.drag',
        drop: function (event, ui) {
            if ($(this).hasClass('overlay')) {
                ui.draggable.draggable({
                    revert: true
                });
            } else {
                ui.draggable.draggable({
                    revert: "invalid"
                });
            }
        }
    });
});

DEMO

Here example setting tolerance: 'pointer',

DEMO