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
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:
.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:
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