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