Los 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:
- IE o superior (soporte parcial)
- Firefox 31 o superior
- Chrome 31 o superior
- Safari 7 o superior
- 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:
Se añaden algunos estilos CSS muy básicos para la visualización de los elementos:
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.
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.
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.
Y esto es todo!!
Fuente original del artÃculo: PHPgang
Traducción realizada por elWebmaster.com
Comentarios recientes
- Bitman: Excelente post webmaster!!! La verdad yo me quedo por ahora con wordpres...
- Sauri: ¿Donde puedo encontrar un tutorial para darle una leÃda?
Gracias...
- Sauri: Hola, estoy aprendiendo java para escritorio en la universidad y me inte...
- Jose: Muy bueno, funciona de maravilla!!...
- gabriel: gracias...
- nico: que bueno...
Feed de los comentarios