How to detect the dragleave event in Firefox when dragging outside the window

drag-and-drop, html, javascript, jquery

Solution

I've found a solution. The problem was not so much that the `dragleave` event wasn't firing; rather, the `dragenter` 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 final `dragleave` event was occuring, but the double firing of `dragenter` events was messing up the count. (Why couldn't I just listen for `dragleave` you ask? Well, because `dragleave` functions very similarly to `mouseout` in that it fires not only when leaving the element but also when entering a child element. Thus, when `dragleave` 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` and `dragleave` had been triggered on. Since events propagate up to the document, listening for `dragenter` and `dragleave` 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 the `event.target` to the collection whenever dragenter was fired, and I removed `event.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 the `drop` event is fired, I want to reset the collection to empty, so it's ready to go when the next `dragenter` 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-invoking `dragenter`.

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, and `draghoverstart` is triggered when first dragging into the element, and `draghoverend` is triggered once the drag has actually left it.

// The plugin code
$.fn.draghover = function(options) {
  return this.each(function() {

    var collection = $(),
        self = $(this);

    self.on('dragenter', function(e) {
      if (collection.length === 0) {
        self.trigger('draghoverstart');
      }
      collection = collection.add(e.target);
    });

    self.on('dragleave drop', function(e) {
      collection = collection.not(e.target);
      if (collection.length === 0) {
        self.trigger('draghoverend');
      }
    });
  });
};

// Now that we have a plugin, we can listen for the new events 
$(window).draghover().on({
  'draghoverstart': function() {
    console.log('A file has been dragged into the window.');
  },
  'draghoverend': function() {
    console.log('A file has been dragged out of window.');
  }
});

Without jQuery

To handle this without jQuery you can do something like this:

// I want to handle drag leaving on the document
let count = 0
onDragEnter = (event) => {
  if (event.currentTarget === document) {
    count += 1
  }
}

onDragLeave = (event) => {
  if (event.currentTarget === document) {
     count += 0
  }

  if (count === 0) {
    // Handle drag leave.
  }
}

Problem

Original source

Related problems

• How can I detect when the mouse leaves the window?
• Firefox firing dragleave when dragging over text