viernes, 4 de febrero de 2011

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!!!

25 comentarios:

  1. ostia!!!
    muchas gracias por la publicación me ha sido de gran ayuda!!! :D

    tu CSS!

    ResponderEliminar
  2. Reescribo comentario, el original se perdio por accidente :

    Muchas gracias y me alegro. Seguiré ampliando el blog :)

    ResponderEliminar
  3. hola una pregunta por que? me manda a la imagen en una ventana nueva..
    Gracias....

    ResponderEliminar
    Respuestas
    1. Creo que depende de la configuración de tu Pc o navegador. Prueba con otro navegador aver que tal!

      Eliminar
    2. A mi me pasa igual. En chrome funciona perfectamente, pero en firefox no. Estoy dandole vueltas al código para solucionar lo de firefox pero no lo consigo.
      Si haces un código y lo publicas, mira antes de que funcione en varios navegadores, siendo firefox uno de los más importantes.

      Eliminar
    3. Muchas gracias por tu comentario, sin embargo opino que la mayoria de usuarios utilizan Chrome.
      Si conseguís el código comatible con firefox estaría encantado que lo publicárais para ayuda de los demás. Muchas gracias!

      Eliminar
  4. hola disculpa una preguntita si quiero que al soltar se mueva donde este el mouse se podria hacer?

    ResponderEliminar
    Respuestas
    1. Supongo que si que se podrá lo que yo no lo he probado. Quizás alguien lo haya hecho y nos podría ayudar :D

      Eliminar
  5. No hay que programar para un navegador hay que hacerlo para todos, en FireFox (mi navegador preferido) no funciona. Hay gente que todavía usa IE 8,7,6...

    Gracias de todos modos.

    ResponderEliminar
  6. Para Firefox la solución es agregar la línea:
    e.preventDefault();
    al principio de la función soltar(), esto se debe hacer en cualquier función que maneje el evento ondrop. De esta forma el navegador detiene la acción por defecto que es abrir el link de la imagen.
    Espero les sirva. Saludos.

    ResponderEliminar
    Respuestas
    1. Muchísimas gracias, me gusta que participemos todos. Muy útil.

      Eliminar
  7. Me da todo el rato problemas con el DataTransfer me pasa todo el rato el mismo problema por consola: Cannot read property 'dataTransfer' of undefined. Alguien sabe porque puede ser?? Gracias!!

    ResponderEliminar
    Respuestas
    1. Prueba a ver,añade:

      e.dataTransfer = e.originalEvent.dataTransfer;

      o substituyendo el primer termino por el segundo.

      Esto encima de cada línea que te aparezca el error. Y nos cuentas.

      Eliminar
  8. no me funciona :(, no c por que

    ResponderEliminar
  9. hola, no se si se puede eliminar un elemento después de haberlo añadido en la cesta de compra?

    ResponderEliminar
    Respuestas
    1. y me sale imagen rota en la lista de compra. no se porque, ayuda porfa

      Eliminar
    2. Fíjate a ver en el tamaño del DIV o si as utilizado algún paddin o margin.

      Eliminar
    3. gracias, ya me funciona. el tema de eliminar o deshace una imagen que esta en la cesta de compra, sabes algo?

      Eliminar
    4. No, lo siento.. yo intentaría añadirle al segundo cuandro las propiedades del primero también. así poder arrastrar de derecha a izquierda y de izquierda a derecha. Muchas gracias!!

      Eliminar
  10. Hola, hay un metodo para eliminar la imagen arrastrada de la lista de comprar, es decir, una funcion que solo arrastre la imagen y se pueda quedar en el lugar arrastrado, saludos.

    ResponderEliminar
  11. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  12. Hola gracias por el tutorial, mi pregunta es como hago para que los elementos de la caja productos se arrastren a la lista de compra solo una vez dejando una copia en la caja de productos
    Muchos saludos

    ResponderEliminar
  13. Como le hago para pasar solo un elemento de un lado al otro

    ResponderEliminar