Firefox doesn't properly trigger the dragleave event when dragging outside of the window:
https://bugzilla.mozilla.org/show_bug.cgi?id=665704
https://bugzilla.mozilla.org/show_bug.cgi?id=656164
I'm trying to develop a workaround for this (which I know is possible because Gmail is doing it), but the only thing I can come up with seems really hackish.
One way of knowing when dragging outside the window has occurred it to wait for the dragover
event to stop firing (because dragover
fires constantly during a drag and drop operation). Here's how I'm doing that:
var timeout;
function dragleaveFunctionality() {
// do stuff
}
function firefoxTimeoutHack() {
clearTimeout(timeout);
timeout = setTimeout(dragleaveFunctionality, 200);
}
$(document).on('dragover', firefoxTimeoutHack);
This code is essentially creating and clearing a timeout over and over again. The 200 millisecond timeout will not be reached unless the dragover
event stops firing.
While this works, I don't like the idea of using a timeout for this purpose. It feels wrong. It also means there's a slight lag before the "dropzone" styling goes away.
The other idea I had was to detect when the mouse leaves the window, but the normal ways of doing that don't seem to work during drag and drop operations.
Does anyone out there have a better way of doing this?
UPDATE:
Here's the code I am using:
$(function() {
var counter = 0;
$(document).on('dragenter', function(e) {
counter += 1;
console.log(counter, e.target);
});
$(document).on('dragleave', function(e) {
counter -= 1;
console.log(counter, e.target);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Open up the console and look at what number is reporting when dragging files in and out of the window. The number should always be 0 when leaving the window, but in Firefox it's not.</p>
Best Answer
I've found a solution. The problem was not so much that the
dragleave
event wasn't firing; rather, thedragenter
event was firing twice when first dragging a file into the window (and additionally sometimes when dragging over certain elements). My original solution was to use a counter to track when the finaldragleave
event was occuring, but the double firing ofdragenter
events was messing up the count. (Why couldn't I just listen fordragleave
you ask? Well, becausedragleave
functions very similarly tomouseout
in that it fires not only when leaving the element but also when entering a child element. Thus, whendragleave
fires, your mouse may very well still be within the bounds of the original element.)The solution I came up with was to keep track of which elements
dragenter
anddragleave
had been triggered on. Since events propagate up to the document, listening fordragenter
anddragleave
on a particular element will capture not only events on that element but also events on its children.So, I created a jQuery collection
$()
to keep track of what events were fired on what elements. I added theevent.target
to the collection whenever dragenter was fired, and I removedevent.target
from the collection whenever dragleave happened. The idea was that if the collection were empty it would mean I had actually left the original element because if I were entering a child element instead, at least one element (the child) would still be in the jQuery collection. Lastly, when thedrop
event is fired, I want to reset the collection to empty, so it's ready to go when the nextdragenter
event occurs.jQuery also saves a lot of extra work because it automatically does duplicate checking, so
event.target
doesn't get added twice, even when Firefox was incorrectly double-invokingdragenter
.Phew, anyway, here's a basic version of the code I ended up using. I've put it into a simple jQuery plugin if anyone else is interested in using it. Basically, you call
.draghover
on any element, anddraghoverstart
is triggered when first dragging into the element, anddraghoverend
is triggered once the drag has actually left it.Without jQuery
To handle this without jQuery you can do something like this: