I have a HTML5 drag-n-drop script that allows users to drop files in #droparea. The #droparea div has child elements that are also div elements.

<div id="droparea">
    <div id="showif_no_dragover">Drag files here!</div>
    <div id="showif_dragover">Drop the files!</div>
</div>

The associated javascript/jquery is:

var droptarget = "#droparea";
$(droptarget).live('dragenter', dragEnter);
$(droptarget).live('dragleave', dragExit);
$(droptarget).live('dragover', nothing);
$(droptarget).live('drop', dropGo);

(Side question: should I use .live(), .on() or .bind() here?)

I have created a sample jsFiddle with some additional code here: http://jsfiddle.net/PwFr9/3/

If you look at the console, you will notice that as you drag a file within #droparea, dragenter() and dragleave() are called multiple times, even though the drag is still inside #droparea. If you remove the child elements (#child1 and #child2), the problem is gone because the child elements are gone. How can I keep the child elements and prevent them from messing up the drag events?

I have searched Stackoverflow and Google for hours without much help. I found this questions here at Stackoverflow: How to keep child elements from interfering with HTML5 dragover and drop events? I don't know why it works, though.

I have tried placing 2 div elements on top of each other (via CSS positioning). The top-most div has the drag events attached whereas the bottom-most div has the child elements. I do not like this approach because it doesn't work with the rest of my page and does not allow mouse-click interaction with the bottom-most div.

Any help is appreciated! Thank you in advance.

Regards, tundoo