dragenter should be fired after dragleave

RESOLVED WORKSFORME

Status

()

Core
Drag and Drop
RESOLVED WORKSFORME
7 years ago
a year ago

People

(Reporter: Giorgio, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

7 years ago
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
(Reporter)

Comment 1

7 years ago
Created attachment 498128 [details]
dragenter is fired before dragleave
What makes you think that dragenter should be fired after dragleave? From a quick skim of the spec, the opposite is true.
(Reporter)

Comment 3

7 years ago
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
(Reporter)

Comment 4

7 years ago
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
(Reporter)

Comment 5

7 years ago
Created attachment 498193 [details]
drag X over A and after over B

Updated

7 years ago

Comment 6

6 years ago
use event.relatedTarget

Comment 7

6 years ago
I reported the same problem in bugzilla nr 636503
(Reporter)

Comment 8

6 years ago
hi, see http://www.w3.org/Bugs/Public/show_bug.cgi?id=11568
Duplicate of this bug: 636503

Comment 10

5 years ago
@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!

Updated

a year ago
Duplicate of this bug: 631713

Comment 12

a year ago
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

Updated

a year ago
Status: UNCONFIRMED → RESOLVED
Last Resolved: a year ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.