Why do child elements cause 'dropleave' to be called (drag-n-drop file upload)?
- by tundoopani
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
