Drag and Drop (Arrastrar y soltar) en HTML5

En este turorial vamos a ver como crear un Drag and Drop (Arrastrar y soltar) en html5 nativo, primero veamos el resultado en vídeo, aunque al final del tutorial tenemos un link para ver el ejemplo en vivo:

Para empezar con este ejemplo crearemos dos Div (uno para comida y otro para bebida) añadiendo la propiedad draggable="true" refiriéndonos a que este Div como arrastrable. El codigo sería este:

<div id="comida" draggable="true">
<img src="comida.png" width="128" height="128"/></div>
<div id="lata" draggable="true">
<img src="lata.png" width="128" height="128" /></div>

Ahora crearemos otro Div llamado lista que será donde arrastraremos las imagenes de comida y lata.

<div id="lista">

</div>

A continuación vamos a crear las funciones javascript, están totalmente comentadas:

<script>
//Al empezar el arrastramiento
function empezar(e ){
//Definimos el objeto arrastrado (su Id)como Text
e.dataTransfer.setData('Text', this.id);
//Permitimos dejarlo en sitio de 'mover'
e.dataTransfer.effectAllowed = 'move';
}

//Al llegar a la zona de destino 'List de compra'
function lista_compra(e ) {
// Dejamos mover
e.dataTransfer.dropEffect = 'move';
// Dejamos soltar
return false;
}
// Al soltar
function soltar (e ) {
//Indicamos el producto que ha comprado
//creamos una imagen
imagen = new Image();
//La imagen será igual a la que arrastramos
imagen.src = e.dataTransfer.getData('Text') + '.png';
//añadimos la imagen a la lista
document.getElementById('lista').appendChild(imagen);
}

Ya solo queda conectar los Div de lista y comida a las funciones que hemos creado anteriormente:

//Conectamos los eventos
//ondragover - Al mover sobre la lista
document.getElementById('lista').ondragover = lista_compra;
//ondragstart - Al empezar a arrastrar
document.getElementById('comida').ondragstart = empezar;
//ondragstart - Al empezar a arrastrar
document.getElementById('lata').ondragstart = empezar;
//ondrop - Al soltar
document.getElementById('lista').ondrop = soltar;
</script>

Para ver el ejemplo en vivo hagan click en el siguiente botón:

No olviden escribir su comentario!!!