Tutorial uso de API Drag&Drop HTML5

Aprende a utilizar la API de HTML5 sobre arrastrar y soltar con este sencillo tutorial paso a paso.

API html5 Compatibilidad con navegadores Eventos HTML Eventos JavaScript

 HTML5 viene con una bien surtida API que nos brinda diversas funcionalidades como estándar, gracias a las cuales podemos desarrollar aplicaciones web  más complejas y atractivas. 

En este tutorial vas a poder aprender a hacer uso de esta fabulosa API para crear funcionalidades de arrastrar y soltar en web con Drag&Drop.

Introducción a Drag and Drop de HTML5

Como he dicho antes Drag and Drop es un estándar en HTML5. Esto quiere decir que cualquier elemento puede ser arrastrado, o mejor dicho, convertido en elemento arrastrable.

Todo pasa por un concepto tan sencillo como el siguiente: todo elemento html que queramos permitir arrastrar deberá tener la propiedad draggable con el valor true

<img draggable="true" src="imagen.jpg" />

En el momento que activemos esta propiedad el elemento en cuestión podrá activar los distintos eventos disponibles de esta API Drag and Drop. Siendo el primero de ellos ondragstart.

Eventos para javascript de Drag and Drop

Desarrollaremos nuestras funcionalidades de Drag and Drop tratando con funciones los distintos eventos del API.

Los eventos que necesitaremos para una implementación básica dónde arrastramos un elemento HTML hasta otro serán:

  • ondragstart: este evento se lanzará y tratará en el elemento que se arrastra, es decir, ira siempre acompañado del atributo dragable. Cuando un usuario comience a arrastrar el elemento (drag) este evento ejecutará su javascript asociado, por regla general una función.
  • ondragover: evento que se lanzará cuando un usuario "sobrepase" un elemento HTML mientras arrastra a otro que sea draggable. Lo normal es que lo utilicemos en aquellos elementos sobre los que se puedan soltar elementos arrastrados.
  • ondrop: evento que se ejecutará en el elemento sobre el que se suelte otro elemento. Este evento lo usaremos en los elementos "objetivo" de un Drag&Drop.

Como crear elementos arrastrables de HTML5

Para crear tus elementos arrastrables de Drag and Drop tan solo necesitas añadir un atributo al elemento deseado: draggable

El atributo draggable debe tener el valor true para que el elemento se pueda arrastrar.

Como en HTML5 cualquier elemento puede ser arrastrable (draggable), cualquier etiqueta HTML podrá tener el atributo draggable

Una imagen arrastrable podría ser la siguiente:

<img src="imagen/prueba.png" draggable="true" width="100" height="100" />

Como en HTML5 cualquier elemento puede ser arrastrable (draggable), cualquier etiqueta HTML podrá tener el atributo draggable.

ondragstart, el primer evento de Drag and Drop

El primer evento que debes tener en cuenta cuando empieces a trabajar con Drag&Drop es ondragstart. El evento ondragstart se lanzará cada vez que un usuario comienza a arrastrar un elemento HTML arrastrable (draggable="true").

En este evento tendrás que, por ejemplo, guardar información sobre el elemento arrastrado, su id u atributo específico, o todo aquello que se te ocurra que necesitarás para cuando el usuario realice la acción final; normalmente un drop.

Como guardar información en el evento arrastrar (Drag)

Es muy probable que cuando desarrolles con Drag and Drop necesites almacenar información relacionada con el objeto arrastrado. El evento javascript ondragstart de Drag and Drop tiene mecanismos para ello.

En concreto podemos almacenar datos con event.dataTransfer.setData('nombre_var', valor).

Una función básica que almacena el ID de la etiqueta HTML sería:

function alArrastrar( event ) {
    event.dataTransfer.setData('id_arrastrado', event.target.id);
}

Con el método setData() puedes almacenar tantos datos como necesites, como por ejemplo si pretendes permitir soltar elementos sobre otro.

Ahora que ya tienes tu elemento arrastrable terminado hay que ver como permitir soltar este elemento sobre otro concreto.

Permitir hacer drop de un elemento sobre otro

Por defecto, en HTML5, no se permite soltar elementos HTML, a pesar de que sean arrastrables, sobre otros elementos. Para permitir soltar (hacer Drop) sobre el elemento HTML deseado, debes activar la funcionalidad con el evento ondragover.

Para activar el Drop sobre un elemento tienes que desactivar el comportamiento por defecto de HTML5 con un código similar al siguiente:

En el elemento HTML:

<div class="objetivo-drop" ondragover="activarSoltar(event)" >lt;/div>

La función activarSoltar desactivará el comportamiento por defecto:

function activarDrop(event){
	event.preventDefault();
}

En esta función desactivamos el comportamiento del evento (event) con el método preventDefault() (prevenir comportamiento por defecto. Con este sencillo código ya se pueden arrastrar elementos sobre nuestro contenedor.

Para confirmar que has implementado bien la solución puedes probarlo y observar que el icono del ratón cambia al arrastrar un elemento sobre el contenedor.

Trabajando con el elemento soltado con el evento ondrop

Ya casi hemos terminado. Para finalizar vamos a asignar una función javascript para el evento ondrop() que se ejecuta al soltar un elemento sobre el elemento objetivo.

Modificando el contenedor activado para soltar elementos sobre él:

<div class="objetivo-drop" ondragover="activarSoltar(event)"  ondrop="alSoltar(this, event)" ></div>

El código de la función alSoltar tan solo deberá mirar que elemento fue arratrado y soltado y realizar el comportamiento que requiramos. En este ejemplo concreto voy a enseñarte como inserto el elemento HTML completo en el interior del div.

Como recuperar datos almacenados en eventos Drag & Drop

Para recuperar los datos almacenados tendrás que trabajar, una vez más, con el objeto event.

function alSoltar(objetoContainer, event){
     var idArrastrado = event.dataTransfer.getData('id_arrastrado'); 
     objetoContainer.innerHTML = document.getElementById(idArrastrado).outerHTML;
 }

Con el método getData() recuperamos las variables creadas con anterioridad con setData(), mientras que con el atributo innerHTML asignamos contenido al interior de la etiqueta. En este caso inserto el HTML del elemento con el id que guardé en id_arrastrado.

Como usar Drag and Drop. Repaso final

Si has seguido este tutorial de principio a fin habrás logrado crear una funcionalidad básica de arrastrar y soltar elementos, insertándolos unos (los arrastrables) en otros (los que tienen el evento ondrop).

Los pasos que hemos visto podríamos resumirlos de la siguiente forma:

  1. Activamos los elementos arrastrables añadiendoles el atributo draggable y poniéndole el valor true.
  2. Activamos los elementos "contenedores" modificando el comportamiento del evento ondragover con el método event.preventDefault().
  3. Guardamos información en el evento ondragstart() con el metodo setData() del objeto event.dataTransfer: event.dataTransfer.setData('nombre_variable', valor);
  4. Recuperamos la información guardada en el evento ondrop() para trabajar con la información. Para esto usamos el método getData() de dataTransfer: event.dataTransfer.getData('nombre_variable');

Sobre el autor

Javier Gómez Redactor en Srcodigofuente.es

Javier Gómez

Ingeniero técnico en informática de gestión. Desarrollador web freelance y profesor de desarrollo web a partes iguales. Testarudo autodidacta, creativo, perfeccionista y alma libre.

Cargando comentarios

Utilizamos "cookies" para información estadística. Si continúas navegando aceptas su uso.