drag and drop

HTML

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

CSS

#dropbox {
    width: 300px;
    height: 100px;
    background-color:#AAA;
    color:white;
}

JavaScript

window.addEventListener("dragover", function (e) {
    e = e || event;
    e.preventDefault();
}, false);
window.addEventListener("drop", function (e) {
    e = e || event;
    e.preventDefault();
}, false);

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

box.addEventListener('dragover', function (e) {
    box.innerHTML = JSON.stringify(e.dataTransfer.types) + '<br>';
    if (e.dataTransfer.types[0].indexOf('text') >= 0) {
        e.dataTransfer.effectAllowed = 'none';
    }
});

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

box.addEventListener('dragover', function (e) {
    e = e || event;
    e.preventDefault();
}, false);