HTML5 Drag & Drop

Página que permitem fazer drag e drop de uma imagem para duas divs utilizando as novas propriedades de HTML de drag&drop

by Tiago Sousa

HTML

<p>Arraste a imagem para dentro do retangulo:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</br>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</br>

<img id="drag1" src="http://placehold.it/350x150" draggable="true" ondragstart="drag(event)" width="336" height="70">

CSS

#div1 {
    width:350px;
    height:70px;
    padding:10px;
    border:1px solid #aaaaaa;
}
#div2 {
    width:350px;
    height:90px;
    padding:10px;
    border:1px solid #aaaaaa;
}

JavaScript

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function allowDrop(ev) {
    ev.preventDefault();
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}