Firefox fires drag events when moving over div scrollbar

Question

I want to develop a file drag and drop component with a div and some styling:

dragenter: change div border color
dragleave: revert to original div border color

On Firefox 35 (Ubuntu), when the div have a scrollbar (horizontal or vertical) and when moving a file through the scrollbar then I have following events:

dragenter: Moving over div border
dragenter: Moving over scrollbar
dragleave: Leaving scrollbar

So I'm in the div but dragleave have been fired and it cancel div new style. I don't have this issue with Chromium.

Is there a way to control those scrollbar events in Firefox ?

HTML :

<div id="appu">test-test-test-test-test-test-test-test-test-test-test-test</div>

CSS:

div#appu {
    height: 200px;
    width: 300px;
    border: 2px dotted black;
    overflow-x: auto;
    white-space: nowrap;
}

div#appu.over {
    border: 2px dotted red;
}

JavaScript :

$("#appu").on("dragenter", function(event) {
    console.log("dragenter");
    if (!$(this).hasClass("over")) {
        $(this).addClass("over");
    }
});

$("#appu").on("dragleave", function() {
    console.log("dragleave");
    if ($(this).hasClass("over")) {
        $(this).removeClass("over");
    }
});

http://jsfiddle.net/ag5vo9sb/

Teemu Teemu · Accepted Answer · 2015-01-18T17:18:47

In dragleave handler you could check, from which element the dragging is coming. If the source and the target are the same, just don't do anything.

$("#appu").on("dragleave", function(e) {
    if (e.relatedTarget === this) {return;} // Added this line
    if ($(this).hasClass("over")) {
        $(this).removeClass("over");
    }
});

A live demo at jsFiddle.

Firefox fires drag events when moving over div scrollbar

1 Answers