Dragexit vs dragleave - what should i use?

Question

The HTML drag and drop API defines two very similar events, dragleave and dragexit , which together with dragenter are designed to track the current target.

A quick search did not show the current and clear documentation of two events when they needed to be used on the other, and browser support, so I thought I'd ask here.

I will talk about the resources that I have found so far:

• The HTML specification contains a detailed description of when each event should be fired, but this requires some decryption.
• MDN documents ( HTML drag and drop APIs and separate dragexit / dragleave ) do not help, saying: "The dragexit event is fired when the item is no longer the target of immediately selecting the drag operation." / "The dragleave event is fired when the item of the draggable item or text leaves a valid target. " and does not provide any information about dragexit browser support (as of 2017-03).
• The Dottoro dragexit docs (another one of Google’s best hits) looks outdated, claiming the "dragexit event has been deprecated in Firefox version 3.5. Use the ondragleave event instead.
• Mozilla error 619703 and W3C error 11568 , which is referenced to shed light on the history of these two events:
  • It seems that Gecko / Firefox originally implemented dragexit , while IE at least implemented dragleave , the main difference is the order of events: dragexit fires before the corresponding dragenter , and dragleave gets confused, fires after.
  • The HTML5 specification initially only defined dragleave with IE semantics, but later (~ 2013) added dragexit with Mozilla semantics.
  • Gecko seems to have implemented dragleave in Firefox 3.5 (2009), originally synonymous with dragexit , but later (4.0, ~ 2011?) Changed it to fit the specification.
  • caniuse indicates that the HTML DnD API is supported more or less in modern browsers, but does not say anything about dragexit specifically

Answer 1

I took a sample code from MDN and ran it in Chrome 57.0.2987.110 and Firefox 52.0.2.

Firefox Event Sequence

• dragexit
• dragleave
• a drop

But Chrome never fired the dragexit event.

Chrome Event Sequence

• dragleave
• a drop

Further analysis of the dragexit events, I found on Wikipedia that this is part of the Mozilla XUL events, which says:

In addition to common / W 3C events, Mozilla has defined a set of events that only work with XUL elements.

In case you need code snippets, here is dragexit and dragleave event snippet from plunkr .

 document.addEventListener("dragexit", function(event) { console.log(event.type); // reset the transparency event.target.style.opacity = ""; }, false); document.addEventListener("dragleave", function(event) { console.log(event.type); // reset background of potential drop target when the draggable element leaves it if (event.target.className == "dropzone") { event.target.style.background = ""; } }, false); 

There is an interesting tutorial that shows that the DnD API can be fully implemented without using the dragexit event, which is not fully supported by all browsers. Your safe bet is to use the dragleave event, which is well supported by all major browsers.