dragexit vs dragleave - which should be used?

Question

The HTML Drag and Drop API defines two very similar events, dragleave and dragexit, which along with dragenter are intended to help track the current drop target.

A quick search didn't turn up any current and clear documentation of the two events, when one should be used over another, and the browser support, so I thought I'd ask here.

I'll share the resources I found so far:

• The HTML specification has detailed description of when each event is supposed to be fired, but it requires some deciphering.
• The MDN docs (HTML Drag and Drop API and individual dragexit/dragleave pages) are not much of a help, saying "The dragexit event is fired when an element is no longer the drag operation's immediate selection target." / "The dragleave event is fired when a dragged element or text selection leaves a valid drop target." and providing no information about browser support for dragexit (as of 2017-03)
• Dottoro's dragexit docs (another of the top Google hits) seems out of date, claiming that "The dragexit event is obsolete in Firefox from version 3.5. Use the ondragleave event instead."
• Mozilla's bug 619703 and W3C bug 11568 referenced there shed some light on the history of these two events:
  • Looks like Gecko/Firefox initially implemented dragexit while IE at least implemented dragleave, the major difference being the order of events: dragexit fires before corresponding dragenter, while dragleave, confusingly, fires after.
  • The HTML5 spec initially only defined dragleave with IE semantics, but later (~2013) added dragexit with Mozilla's semantics.
  • Gecko appears to have implemented dragleave in Firefox 3.5 (2009), originally synonymous with dragexit, but later (4.0, ~2011?) changing it to match the spec.
  • caniuse indicates that the HTML DnD API is more-or-less supported across modern browsers, but does not say anything about dragexit specifically

Answer 1

I have taken code sample from MDN and ran it on Chrome 57.0.2987.110 and Firefox 52.0.2.

Firefox event sequence is

1. dragexit
2. dragleave
3. drop

But Chrome never fired dragexit event.

Chrome event sequence is

1. dragleave
2. drop

Further analysis on dragexit event, I found out in Wikipedia that it's part of Mozilla XUL events which says:

In addition to the common/W3C events, Mozilla defined a set of events that work only with XUL elements

In case you need code snippets, here it 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 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 instead that is well supported by all major browsers.