619703 - dragenter should be fired after dragleave

Status: RESOLVED WORKSFORME

(Core :: DOM: Copy & Paste and Drag & Drop, defect)

Description

[Giorgio]

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

[Giorgio]

Attachment: dragenter is fired before dragleave

Comment 2

[:Ms2ger (he/him; ⌚ UTC+1/+2)]

What makes you think that dragenter should be fired after dragleave? From a quick skim of the spec, the opposite is true.

Comment 3

[Giorgio]

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

[Giorgio]

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>
</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

[Giorgio]

Attachment: drag X over A and after over B

Comment 6

[henryfhchan]

use event.relatedTarget

Comment 7

[Jürgen Lange]

I reported the same problem in bugzilla nr 636503

Comment 8

[Giorgio]

hi, see http://www.w3.org/Bugs/Public/show_bug.cgi?id=11568

Comment 10

[Nathan Vander Wilt]

@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 12

[Neil Deakin]

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:

dragexit
dragenter
dragleave