"Drag and Drop" con HTML5 y JavaScript

Me preguntan:

Fer, cómo puedo hacer un Drag and Drop de algún elemento, así como los Quiz y cosas así ?

Fácil! Usando la familia de etiquetas DRAGG que viene en cualquier elemento.

Les pongo el ejemplo.

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

<img id="drag1" src="/ruta/de/la/imagen.png" draggable="true" ondragstart="drag(event)">

Como pueden ver, se usan las etiquetas propias de las funciones Drag and Drop.

Les dejo las funciones JavaScript que actúan:

Esta función  se encarga de hacer DRAGGABLE (movible) el objeto deseado.

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

Esta es la función que se encarga de hacer DROPPABLE (que acepte el DRAGG) el objeto marcado.

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

Esta función perimte hacer válido el DRAG y el DROP de los elementos. Opcionalmente puedes meter funciones a ejecutarse una vez completada la acción.

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

Como puede ver no es complicado, pero su chiste hacerlo.

Esto puede ser aplicable para cualquier elemento: DIV, TABLE CELL, IMG; el que quieran. Solo recuerden colocar las funciones correctas y nombrar los IDs correctos para hacerlo posible.

Los dejo chavos.

Ya saben... Si necesitan algo, avisen.

Saludos.