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

You need to track which elements dragenter and dragleave had been triggered on. Listening dragenter and dragleave on an individual element will capture not only events on that element but also events on children.

The main challenge with detecting dragleave events in Firefox when dragging outside the window is that these events fire for both the target element and its children. To solve this, we create a collection that tracks all elements that have received dragenter events and removes them when dragleave occurs.

Creating a Custom Drag Hover Plugin

Here's a jQuery plugin that properly handles drag events across different browsers, including Firefox ?

$.fn.draghover = function(options) {
    return this.each(function() {
        var collection = $(),
        self = $(this);
        self.on('dragenter', function(ev) {
            if (collection.length === 0) {
                self.trigger('draghoverstart');
            }
            collection = collection.add(ev.target);
        });
        self.on('dragleave drop', function(ev) {
            collection = collection.not(ev.target);
            if (collection.length === 0) {
                self.trigger('draghoverend');
            }
        });
    });
};

Using the Plugin

Listen for the custom drag events on the window object ?

$(window).draghover().on({
    'draghoverstart': function() {
        alert('dragged into the window');
    },
    'draghoverend': function() {
        alert('dragged out of window');
    }
});

The output of the above code is ?

When dragging files into the browser window: "dragged into the window"
When dragging files out of the browser window: "dragged out of window"

How It Works

The plugin maintains a collection of elements that have received dragenter events. When the collection is empty and a dragenter occurs, it triggers draghoverstart. When all elements are removed from the collection via dragleave or drop events, it triggers draghoverend.

This approach works reliably in Firefox because it accounts for the event bubbling behavior and ensures that the dragleave event is only considered complete when all tracked elements have been left.

Conclusion

By tracking dragenter and dragleave events across multiple elements and maintaining a collection, you can reliably detect when dragging leaves the Firefox window, solving the common issue of premature dragleave event firing.