Tutorial HTML 5 (III): Arrastrar y soltar. DRAG AND DROP

HTML 5 (III) 
 DRAG AND DROP. Arrastrar y soltar.

 

 Creo que lo mejor que podemos hacer para ver como funciona esta característica de HTML 5 es hacer un ejemplo.

El resultado de este ejemplo lo podeis ver en el video de arriba, también al final del tutorial tenemos un link para ver el ejemplo en vivo:
Empezamos este ejemplo con 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>
Después 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:





Ejemplo copiado de: www.tutorialeshtml5.com