Full page overlay drag and drop jQuery

Question

I'm trying to add a full page overlay when someone is entering the window with a file. This is working but when I add the overlay, it immediately fires the 'dragleave' event because the overlay blocks the drag. This results in a flickering-effect.

Browser compatibility :
- Chrome and Safari seem to have this issue
- Firefox has this issue when you hold the cursor still, when moving : no problem. - IE9 seems to work

I want to become the same as on imgur.com. If you drag a file to their page it shows an overlay without flickering or such.

First solution

$(window).bind('dragover', dragover);
$(window).bind('drop', drop);
$(window).bind('dragleave', dragleave);

Full example on jsFiddle

Second solution

I also tried to set the 'dragleave' event to the '.overlay' class as you can see here:

$('.overlay').bind('dragleave', dragleave);

Full example on jsFiddle

But if you hover over the paragraph in the divs it also sends an 'dragleave' event.

Does someone know how to prevent this? Or how to a 'dragleave' only when you leave the browser window?

Thanks!

Answer 1

I came across a better solution in my optinion, no need to use timeouts which I tend not to like.

If you set your overlay to have CSS property

pointer-events:none

it won't affect drag events on the window when showing up and you can achieve the same effect

Answer 2

Adding a timeout on the Hide helps preventing the flickering!

function dragover(event) {
    clearTimeout(tid);
    event.stopPropagation();
    event.preventDefault();
    $('.overlay').show();
}

function dragleave(event) {
    tid = setTimeout(function(){
        event.stopPropagation();
        $('.overlay').hide();
    }, 300);
}

I edited your fiddle http://jsfiddle.net/yApUZ/