APIs en HTML5: Drag and Drop


En artículos anteriores estuvimos viendo algunas de las etiquetas que HTML5 ha incorporado para el mejoramiento de la estructura y la semántica en la web, así como algunas etiquetas que se utilizan para el trabajo con el elemento que mayor presencia tiene en nuestras páginas: el texto, y otras que quedaron en desuso con la llegada de esta nueva versión de HTML.

En este artículo estaremos viendo una de las nuevas APIs que ha incluido HTML5, estamos hablando de Drag and Drop. Muchos se preguntarán que es una API. Una API es una Interfaz de Programación de Aplicaciones usada para diseñar productos basados en servicios que nos brinda la misma interfaz.

Drag and Drop

Muchas veces nos preguntamos cómo mover un elemento de un lado a otro dentro de una página web con ayuda del mouse, ya que realizamos a diario este tipo de acciones en aplicaciones de escritorio.

Drag and Drop es una de las funcionalidades que introdujo esta nueva versión de HTML para brindar la oportunidad de que la web se comporte en este sentido de la misma manera que las aplicaciones de escritorio. Esta API contiene 7 eventos o funciones básicas para su trabajo:

  • dragstart: ocurre cuando se realiza la operación de arrastre del elemento.
  • drag: ocurre cuando se mueve el mouse en la operación de arrastrado.
  • dragend: culminada la operación de arrastrar. Siendo esta operación exitosa o no, este evento es disparado.
  • dragenter: se dispara cuando el elemento que está siendo arrastrado entra en un área de soltado.
  • dragleave: se dispara cuando el elemento que está siendo arrastrado sale de un área de soltado.
  • dragover: solo se dispara cuando ocurre la operación de arrastre por posibles destinos.
  • drop: cuando el elemento que está siendo arrastrado es soltado en un destino válido.

Realizando un pequeño ejemplo

A continuación quiero mostrarte un ejemplo de uso de esta API, es bastante sencillo pero nos dará una idea del uso de la misma.

Lo primero que haremos será crear un archivo index.html, al que adicionaremos el siguiente código:

<!-- file index.html -->
<section id="soltar"></section>

<section id="imagenes">
	<img src="imagen.png" id="imagen1" width="100px" height="100px" alt="HTML5">
</section>

El archivo index.html incorpora un archivo style.css y un script.js, debajo el código de cada uno de ellos:

/* file style.css */
<style>
#soltar, #imagenes{
	float: left;
	width: 15%;
	height: 142px;
	margin: 10px;
	border: 1px solid #7f7f7f;
	padding: 5px;
}	
</style>
// file script.js.
<script>
function iniciar () {
	elemento1 = document.getElementById('imagen1');
	elemento1.addEventListener("dragstart", mover,    false);
	elemento1.addEventListener("dragend"  , terminar, false);

	area_destino = document.getElementById('soltar');	
	area_destino.addEventListener("dragenter", function(e) {
		e.preventDefault();
	}, false);

	area_destino.addEventListener("dragleave", function(e) {
		e.preventDefault();
	}, false);
		
	area_destino.addEventListener("dragover", function(e) {
		e.preventDefault();
	}, false);

	area_destino.addEventListener("dragenter", soltar, false);
	
	var terminar = function (e) {
		var elemento = e.target;
		elemento.style.visibility = "hidden";		
	}

	var mover = function(e) {
		var img_code = '<img src="'+ 
				elemento1.getAttribute('src')   +
				'" style="'+ 
				elemento1.getAttribute('style') +
				'"/>';

		e.dataTransfer.setData("Img", img_code);
	}
	
	var soltar = function(e) {
		e.preventDefault();
		area_destino.innerHTML = e.dataTransfer.getData("Img");
	}

	window.addEventListener("load", iniciar, false);
</script>

En el archivo script.js el código es bien sencillo, por eso lo repasaremos levemente, la función iniciar obtiene el elemento que queremos mover, en este caso la imagen con el id=imagen1, y relaciona los eventos dragstart y dragend con las funciones mover y terminar definidas por nosotros, al producirse alguno de estos eventos se ejecutará la función correspondiente.

Luego obtiene el elemento que servirá de área de destino, en este caso la sección con id=soltar, e igualmente adiciona una función para cada evento de los restantes (dragenter, dragleave, dragover y drop), en el caso de los tres primeros solo evitamos que se ejecuten los eventos por defecto con la función preventDefault(), y para el último adicionamos la función soltar, para que se ejecute cuando se produzca el evento drop.

La función terminar es la encargada de hacer desaparecer del origen el elemento que estamos arrastrando, para ello modifica su visibilidad, ocultándolo.

La función mover crear el código de la imagen que estamos moviendo y lo adiciona al atributo Img del objeto dataTransfer del elemento que está siendo arrastrado y la función soltar adiciona el código anterior al destino, pidiéndoselo al objeto dataTransfer.

Por último se hace que la función iniciar se ejecute cuando se cargue la página, al hacerla corresponder con el evento load del objeto window. Debajo te muestro un CODEPEN con el demo:


HTML5

See the Pen vEGMoe by Dimitri Lopez (@mycyberacademy) on CodePen.

El objeto dataTransfer

En el ejemplo se hace uso del objeto dataTransfer, este contiene varios métodos, entre ellos:

setData: es utilizado para declarar los datos que son enviados y el tipo. Los tipos de datos que puede recibir son dos, especiales y regulares, los especiales pueden ser de tipo url o text y los de tipo regulares text/html y text/plain.

getData: retorna los datos del tipo especificado.

clearData: elimina los datos del tipo especificado.

setDragImage: este método es utilizado para personalizar la imagen cuando sale en miniatura al lado del puntero del mouse, y se le pasan por parámetros dos atributos (x,y) que va ser la posición.

types: con este método podemos obtener un arreglo con todos los tipos de datos que fueron utilizados durante la ejecución del evento dragstart, un ejemplo es: arreglo=dataTransfer.types

files: devuelve la información de los archivos que están siendo movidos.

dropEffect: contiene como posibles valores copy, move, none o linky y devuelve el tipo de la operación seleccionada.

effectAllowed: se utiliza para cambiar las operaciones, puede tomar valores como copylink, linkmove, all o uninitialized.

Conclusiones

En este artículo te ofrecí un poco de información acerca de una de las fabulosas APIs que contiene HTML5: >Drag and Drop. Estuvimos viendo los eventos, propiedades y métodos que son utilizados para arrastrar y soltar elementos dentro de la web, todo esto en un ejemplo básico que demuestra cómo utilizar esta API. Espero te halla resultado interesante y útil el artículo de hoy. Happy Coding!!!