JSFiddle - React, Tailwind, and code Playground

by yakun chen

HTML

<div id="holder"></div>

CSS

#holder {
    border: 10px dashed green;
    width: 300px;
    min-height: 300px;
    /* 居中 */
    margin: 20px auto;
}
#holder.hover {
    border: 10px solid red;
}

JavaScript

　　 // 检查浏览器是否支持拖放上传。
　　
if ('draggable' in document.createElement('span')) {　　　　
    var holder = document.getElementById('holder');　　　　holder.ondragover = function () {
        this.className = 'hover';
        return false;
    };　　　　
    holder.ondragend = function () {
        this.className = '';
        return false;
    };　　　　
    holder.ondrop = function (event) {　　　　　　event.preventDefault();　　　　　　
        this.className = '';　　　　　　
        var files = event.dataTransfer.files;　

        console.dir(files);
        // do something with files
        　　　　
    };　　
}