JSFiddle - React, Tailwind, and code Playground

HTML

<div>DRAG OVER ME</div>

CSS

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
div {
    width: 100%;
    height: 100%;
    line-height: 600px;
    text-align: center;
    background: green;
    font-size: 4em;
}

JavaScript

/*
FireFox (up to at least v22.0) has a bug where it fires drag events when leaving text nodes.
There are two kinds: one where the target and relatedTarget are BOTH the parent element of the text node, and another where the target is the parent element and the relatedTarget is the actual text node.
*/

$(function () {
    var enteredElements = $();
    $(document)
        .on("dragenter", function (event) {
            // filter out events which have a text node as relatedTarget
            // we have to do this in a try/catch block in case the relatedTarget was pulled from outside of the current document (eg. another iFrame)
            try{
                if(event.relatedTarget.nodeType == 3) return;
            } catch(err) {}
            // filter out events where the target and relatedTarget are the same
            if(event.target === event.relatedTarget) return;
            enteredElements = enteredElements.add(event.target);
            if(enteredElements.length == 1) $("div").css("background", "red");
        })
        .on("dragleave", function (event) {
            try{
                if(event.relatedTarget.nodeType == 3) return;
            } catch(err) {}
            if(event.target === event.relatedTarget) return;
            enteredElements = enteredElements.not(event.target);
            if(enteredElements.length == 0) $("div").css("background", "green");
        })
});