drag and drop

HTML

<div id="dropbox1">srrtrgfh</div>
Drag something in the drop box below.
<input>
<div id="dropbox"></div>

CSS

#dropbox{
    width: 300px;
    height: 100px;
    background-color:#AAA;
    color:white;
    display:none;
}
#dropbox1{
    width:20px;
    height: 100px;
    background-color:#AAA;
    color:black;

}

JavaScript

var box = document.getElementById('dropbox');

document.addEventListener('dragover', function(e) {
    if (e.dataTransfer.types.contains("Files")) {
        e.stopPropagation();
        e.preventDefault();
        box.style.display = 'block';
        //chrome - srcElement
        //firefox - originalTarget
        e.dataTransfer.dropEffect = (e.srcElement ||e.originalTarget) == box ? 'all' : 'none';
        return false;
    }
}, false);


document.addEventListener('drop', function(e) {
    if (e.dataTransfer.types.contains("Files")) {
        e.stopPropagation();
        e.preventDefault();
        if((e.srcElement ||e.originalTarget) == box){
            alert('Thanks for uploading');
        }
        return false;
    }
}, false);