dragexit vs dragleave - which should be used? - html

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
dragexit
dragleave
drop
But Chrome never fired dragexit event.
Chrome event sequence is
dragleave
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.

Answer 2

The MDN web documents you cite are indeed correct. Dragexit is when a dragging and the cursor is "outside of the selected target", whereas Dragleave fires when dragging and the cursor "leaves."
If you drag your cursor slowly, then it goes is displacing pixel-by-pixel (i.e. a straight line): i.e., your cursor might be at position 500x500, 500x501, 500x502, etc.. If you drag your cursor fast, it might displace by multiple pixels: i.e., your cursor might be at position 500x500, then at 500x510, then at 500x520.
If your cursor moves outside of the element and doesn't touch the boundary of the element, then the DragLeave event will not fire, but the DragExit event will fire. For this reason, I usually just bind both events to the same handler, to get the absolute outcome.
Works for me on Chrome (v. 103.0.5060.134). To test, try dragging and dropping really fast, as that is the only way to produce the error of DragLeave not firing when you actually leave the element. But to be clear, drag and drop in HTML isn't something that I would consider stable across all browsers. (After all, what's your top 5 favorite sites that use drag and drop with their elements? Can you even think of 1?)