Arrastrar y Soltar en HTML5 - Drag And Drop - Tutorial y Ejemplo

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.

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…