Last Comment Bug 619703 - dragenter should be fired after dragleave
: dragenter should be fired after dragleave
Product: Core
Classification: Components
Component: Drag and Drop (show other bugs)
: unspecified
: All All
-- normal (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
: Neil Deakin
: 631713 636503 (view as bug list)
Depends on:
  Show dependency treegraph
Reported: 2010-12-16 09:22 PST by Giorgio
Modified: 2016-05-02 13:33 PDT (History)
5 users (show)
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---

dragenter is fired before dragleave (1.83 KB, text/html)
2010-12-16 09:23 PST, Giorgio
no flags Details
drag X over A and after over B (661 bytes, text/html)
2010-12-16 12:51 PST, Giorgio
no flags Details

Description User image Giorgio 2010-12-16 09:22:53 PST
User-Agent:       Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b8pre) Gecko/20101214 Firefox/4.0b8pre
Build Identifier: 

see the incoming attachment!

Reproducible: Always
Comment 1 User image Giorgio 2010-12-16 09:23:40 PST
Created attachment 498128 [details]
dragenter is fired before dragleave
Comment 2 User image :Ms2ger (⌚ UTC+1/+2) 2010-12-16 11:04:32 PST
What makes you think that dragenter should be fired after dragleave? From a quick skim of the spec, the opposite is true.
Comment 3 User image Giorgio 2010-12-16 11:11:22 PST
because with the "point of view" of the red box i'm still in "dragenter"

for example if i want to set a different background on dragenter and restore the old one on dragleave i can not, because any descendant element fires dragleave after dragenter, so my red box listener thinks that the drag operation is leaved, but it is not

mouseover and mouseout works as expected, and i think dragenter dragleave should do the same

p.s. i dont want to use dragover, performing a single simple operation a lot of times is totally useless
Comment 4 User image Giorgio 2010-12-16 12:33:26 PST
semplified testcase

<div class="item">X</div>

<div id="cart">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>

i drag the X over the cart
i want to highlight the cart border so i use:

cart.addEventListener("dragenter", function(){this.className = "draggingover";},true);
cart.addEventListener("dragleave", function(){this.className = "";},true);

but it does not works

because when i drag over item A the dragenter event is fired
then i drag over item B, the dragenter is fired on item B (***), after the dragleave is fired on element A
at this point, the cart element have not highlighting

(*** at this point i'm dragging over two elements with different trees at the same time :| )

to fix this i have to examine dom trees, set flags and other random things

as in mouseover/mouseout happens the correct procedure should be:

when i drag over item A the dragenter event is fired
then i drag over item B, the item A receives dragleave, the item B receives dragenter

p.s. it is a html5 spec bug, if you agree with me we need to submit a bug on their bugzilla
Comment 5 User image Giorgio 2010-12-16 12:51:53 PST
Created attachment 498193 [details]
drag X over A and after over B
Comment 6 User image henryfhchan 2011-01-05 07:37:01 PST
use event.relatedTarget
Comment 7 User image Jürgen Lange 2011-02-25 09:10:21 PST
I reported the same problem in bugzilla nr 636503
Comment 8 User image Giorgio 2011-02-26 01:16:25 PST
hi, see
Comment 9 User image Ed Morley [:emorley] 2011-05-02 18:51:16 PDT
*** Bug 636503 has been marked as a duplicate of this bug. ***
Comment 10 User image Nathan Vander Wilt 2012-02-07 13:42:18 PST
@henry.fai.hang.chan: event.relatedTarget should always be null according to the W3C spec.

The spec's `dragenter before dragleave` ordering is actually very helpful given that child elements cause the drop to leave its parent: [enter (parent), enter (child), leave (parent)] can be detected as mouse still in parent whereas [enter (parent), leave (parent), enter (child)] could cause mayhem — especially if the child element is removed when the drag leaves the parent!
Comment 11 User image Neil Deakin 2016-05-01 13:33:49 PDT
*** Bug 631713 has been marked as a duplicate of this bug. ***
Comment 12 User image Neil Deakin 2016-05-01 13:37:12 PDT
This is the correct behaviour. The dragexit event is now in the spec however and functions in the order you expect.

The correct order is:


Note You need to log in before you can comment on or make changes to this bug.