JSFiddle - React, Tailwind, and code Playground

by philfreo

HTML

<div id="d0" style="border: 1px solid black;">drag files onto this page</div>
<div id="d1" style="border: 1px solid black; display: none; background-color: red;">-&gt; drop here &lt;-</div>
<div id="d2" style="border: 1px solid black;">and stuff will happen</div>
<div style="float: left;">mouse them all over&nbsp;</div>
<div style="float: left;">these elements</div>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div>end page</div>

JavaScript

var resetTimer;

var reset = function() {
    $('#d1').hide();
};

var f = function(e) {
    var srcElement = e.srcElement? e.srcElement : e.target;

    if ($.inArray('Files', e.dataTransfer.types) > -1) {
        e.stopPropagation();
        e.preventDefault();

        e.dataTransfer.dropEffect = (srcElement.id == 'd1') ? 'copy' : 'none';

        if (e.type == "dragover") {
            if (resetTimer) {
                clearTimeout(resetTimer);
            }
            $('#d1').show();
            console.info('dropped on <' + srcElement.tagName.toLowerCase() + ' id="' + srcElement.id + '">\n\ne.dataTransfer.types is ' + e.dataTransfer.types + '\n\ne.dataTransfer.files.length is ' + (e.dataTransfer.files ? e.dataTransfer.files.length : 0));

        } else if (e.type == "dragleave") {
            resetTimer = window.setTimeout(reset, 25);
        } else if (e.type == "drop") {
            reset();
            alert('dropped on <' + srcElement.tagName.toLowerCase() + ' id="' + srcElement.id + '">\n\ne.dataTransfer.files.length is ' + (e.dataTransfer.files ? e.dataTransfer.files.length : 0));
        }
    }
};

document.body.addEventListener("dragleave", f, false);
document.body.addEventListener("dragover", f, false);
document.body.addEventListener("drop", f, false);