En este Articulo Arrastrar y Soltar en HTML5 ( drag and drop) veremos que es y como funciona esta caracteristica que viene en HTML5, tambien vamos a construir un ejemplo que nos servira de tutorial para ir practicando lo que vamos viendo. Que es la caracteristica Arrastrar y Soltar en html5 (drag and drop)?, Drag and drop es una caracteristica que nos permite arrastrar practicamente cualquier elemento de una pagina, funciona en base a:
- Eventos
- Javascript
- Marcado de elementos
Esta caracterisitica permite la interactividad con el usuario de una manera mas facil, real y dinamica, asi que comenzemos con esto Arrastrar y Soltar en HTML5…
Requerimientos:
- Notepad ++(vale cualquier otro editor de textos)
Desarrollo
Para comprender el funcionamiento y puesta en marcha de la caracteristica drag and drop vamos a realizar un ejemplo en el cual tendremos 4 imagenes tipo rompecabezas que seran capaces de arrastrarse y cambiar de posicion entre ellas.
¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:
WebEmpresa- Creacion de contenido Arrastrable
Para hacer que un elemento de una pagina sea capaz de arrastrar y soltar en html5 tenemos que agregar el atributo draggable y establecerlo a true, cabe decir que la mayoria de los navegadores tienen la opcion de arrastrar activada por defecto para los elementos de ancla: como
| 1 2 3 | draggable=true |
en nuestro ejemplo tendremos 4 divs en los que iran las 4 imagenes que queremos arrastrar asi que lo que arrastraremos seran los divs
- Eventos
La caracteristica Drag and Drop posee algunos eventos para su manipulacion y control de todo el proceso como son:
- dragstart
Se dispara cuando comienza el arrastrado del elemento
- drag
Se dispara cada vez que el mouse es movido y se esta arrastrando un objeto
- dragenter
Se dispara cuando se esta realizando un arrastrado y se ingresa por primera vez con el mouse a un elemento objetivo
- dragleave
Se dispara cuando se esta realizando un arrastrado y deja con el mouse a un elemento objetivo
- dragover
Se dispara cuando se esta realizando un arrastrado y se ingresa con el mouse a un elemento objetivo
- drop
Se dispara cuando el usuario suelta el boton mientras arrastra un objeto sobre un objeto que puede recibirlo
- dragend
Se dispara cuando el usuario suelta el boton mientras arrastra un objeto
El estilo CSS de la clase columna es la siguiente:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .columna{ width:200px; height:200px; float:left; border: 2px solid #FFFFFF; -webkit-border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; cursor:move; } .columna.over { border: 2px solid #FF0000; } |
Aqui cabe decir que el codigo: cursor:move; es para que aparezca sobre el elemento el icono de mover para darle a enternder al usuario que es un objeto arrastrable.
Ahora el codigo javascript donde se agregan los eventos drag and drop en html5 es el siguiente:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | var dragSrcEl = null; var cols = document.querySelectorAll('#panel .columna'); //guardamos el contenido que queremos cambiar para la transferencia al dejar de arrastrar function handleDragStart(e) { dragSrcEl = this; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/html', this.innerHTML); } function handleDragOver(e) { if (e.preventDefault) { e.preventDefault(); } e.dataTransfer.dropEffect = 'move'; //efecto al mover return false; } function handleDragEnter(e) { this.classList.add('over');//agregamos borde rojo en el estilo css } function handleDragLeave(e) { this.classList.remove('over'); //eliminamos borde rojo en el estilo css } function handleDrop(e) { if (e.stopPropagation) { e.stopPropagation(); //evitamos abrir contenido en otra pagina al soltar } //hacemos el intercambio de contenido html de el elemento origne y destino if (dragSrcEl != this) { dragSrcEl.innerHTML = this.innerHTML; this.innerHTML = e.dataTransfer.getData('text/html'); this.classList.remove('over'); } return false; } function handleDragEnd(e) { [].forEach.call(cols, function (col) { col.classList.remove('over');//eliminamos el borde rojo de todas las columnas }); } //agregamos todos los eventos anteriores a cada columna mediante un ciclo [].forEach.call(cols, function(col) { col.addEventListener('dragstart', handleDragStart, false); col.addEventListener('dragenter', handleDragEnter, false); col.addEventListener('dragover', handleDragOver, false); col.addEventListener('dragleave', handleDragLeave, false); col.addEventListener('drop', handleDrop, false); col.addEventListener('dragend', handleDragEnd, false); }); |
Ahora solo queda probar el codigo…
Puedes ver el ejemplo en accion en el siguiente link:
Lab DragAndDrop
Resultado
Visto – Arrastrar y Soltar en HTML5 – Drag And Drop – Tutorial y Ejemplo
Buenos días … Me gustaría saber si haces desarrollos de aplicaciones específicas? si es así como te contacto?
Esto debería funciobar en moviles, ejemplo ios? Por que no funciona
Esto debería funciobar en mi Inés, ejemplo ios? Por que no funciona
¿Porqué no funciona en IE?
Un saludo.
Hola, una pregunta y si quisiera validar que esten en el orden correcto como podria hacerlo?
Hola, he utilizado tu código para crear un mapa en el que puedo arrastrar los elemento, en vez de usar div estoy utilizando una tabla en la que cada td tiene un id, la tabla esta creada a partir de una base de datos, en la que me gustaría guardar los elemento arrastrados a cada celda, por lo que necesito obtener la ID de la celda a la que he arrastrado la imagen y el nombre de la imagen que he arrastrado a dicha celda, ¿Sabes como puedo conseguirlo? supongo que podre obtener esta información en la parte de intercambiar… Read more »
Hola VityOsma, si te entiendo bien (sino corrigeme)
-Para obtener el id del elemento donde se «suelta» el elemento arrastrado seria con la instruccion this.getAttribute(‘id’); dentro de la funcion handleDrop.
-Para obtener el nombre de la imagen puedes establercer el nombre en el atributo alt y luego obtenerlo o obtener el atributo src completo. Al igual que la forma anterior la linea seria dragSrcEl.getAttribute(‘src’); dependiendo si estas moviendo un elemento img, (Recuerda las variables dragSrcEl se utilizaron en el tutorial)
Saludos.