Arrastrar y soltar (Drag and drop) con HTML5

Arrastrar y soltar o mejor conocido como Dran and Drop, así nos referimos a la acción de mover un objeto (imagen, texto etc.) con el ratón, ya sea de un lugar a otro o de una ventana a otra, e incluso desde cualquier lugar del sitio a la barra de búsqueda del mismo.

Con HTML ya es posible hacer este efecto, claro esta que necesitamos la ayuda de javascript, para hacer arrastrables y soltables los objetos indicados.
Nosotros en este caso arrastraremos una imagen.

Aquí en taringa no es posible hacer que funcione el código pero en www.centromex.com.ar tiene este mismo tutorial en donde muestran el efecto. (Esta en la fuente de este post)

HTML:

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag1" draggable="true" ondragstart="drag(event)" src=imagen.png />
</div>
Lo primero que tenemos que hacer es decirle a nuestra imagen que es arrastrable, colocamos lo siguiente dentro de nuestra etiqueta <img draggable="true">, justo como esta arriba.

Javascript:
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData('Text');
ev.target.appendChild(document.getElementById(data));
}
Esta acción (Drag and Drop) es muy utilizada para distintas cosas, no solamente para hacer bonitos efectos, también es indispensable por ejemplo en las páginas donde puedes almacenar archivos como Mediafire o 4shared.