JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<div id="dropbox"></div>
<div id="output"></div>

CSS

#dropbox {
    border: 2px dashed black;
    width: 200px;
    height: 200px
}
.red {
    background-color: red;
}

JavaScript

var dropbox;

dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("dragleave", dragleave, false);
dropbox.addEventListener("drop", drop, false);

function dragenter(e) {
    console.log("enter");
    e.toElement.className = "red";
    e.stopPropagation();
    e.preventDefault();
}

function dragleave(e) {
    console.log("leave");
    e.toElement.className = "";
    e.stopPropagation();
    e.preventDefault();
}

function dragover(e) {
    console.log("over");
    e.stopPropagation();
    e.preventDefault();
}

function drop(e) {
    console.log("drop");
    e.toElement.className = "";
    e.stopPropagation();
    e.preventDefault();

    var dt = e.dataTransfer;
    var files = dt.files;

    handleFiles(files);
}

function handleFiles(files) {
    var str = _.map(files, function (f) {
        return f.name + " (" + f.size + " bytes)";
    }).join("<br />");
    document.getElementById("output").innerHTML = str;
}