Manuel Rosa Ramos 14 de julio de 2015 a las 14.24
   Imprimir artículo
elWebmaster.com

API Drag and Drop de HTML5


HTML5_logo_and_wordmark.svgLos días en que los programadores debían depender en gran medida de librerías y plugins diseñados por terceros para poder implementar la funcionalidad “arrastrar y soltar” en los sitios web están llegando a su fin con la API Drag and Drop de HTML5.

Esta API, que todavía no es del todo compatible tiene un soporte mundial un poco superior al 60%. En detalle, podemos ver cómo es soportado por diferentes navegadores:

  1. IE o superior (soporte parcial)
  2. Firefox 31 o superior
  3. Chrome 31 o superior
  4. Safari 7 o superior
  5. Opera 29 o superior

La manera de utilizarla es muy sencilla y la ejemplificaremos creando una web sencilla de notas que se limita sólo a mostrar la funcionalidad de arrastrar y soltar.

Lo primero es crear el código HTML a utilizar, como este:

html-dg-1

Se añaden algunos estilos CSS muy básicos para la visualización de los elementos:

html-dg-2

En los estilos definidos se puede ver que el estilo de las notas en cada sección de tipo de notas tiene un color diferente, por lo que si arrastramos una nota de una sección a otra cambiará automáticamente su color. También hemos colocado el símbolo del cursor correspondiente para que el usuario sepa que los elementos pueden moverse.

Solo falta añadir el comportamiento de arrastrar y soltar para las notas. Lo primero es definir las notas y tipos de notas como variables del DOM.

html-dg-3

Hacemos un bucle sobre las notas a fin de agregar un nombre de clase único para cada una (puede hacerse también asignando un id en lugar de una clase). Agregamos también el atributo “draggable” con el valor “true” (este atributo puede ser definido también directamente el código HTML a cada una de las notas).

Seguidamente, se añade un detector de eventos o “event listener” para capturar el inicio del “arrastre” y así guardar el nombre de clase del elemento (o en su caso el id) como datos a transferir. Como el nombre de las clases que hemos definido para las notas es único luego podremos añadir un detector para el evento “soltar” y añadir el elemento con ese nombre de clase en contenedor (sección o tipo de notas) en el que se está soltando.

html-dg-4

Finalmente, hacemos una iteración sobre los tipos de secciones definidas y colocamos para cada caso el detector del evento “soltar”. Aquí se obtienen los datos que se enviaron en la transferencia mediante el atributo “text” (que es el nombre de clase del elemento arrastrado) y usamos este valor para obtener el elemento mediante document.getElementsByClassName y añadirlo a la nueva sección.

html-dg-5

Y esto es todo!!

Fuente original del artículo: PHPgang

Traducción realizada por elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder