Propiedades de CSS3 para Drag & Drop



Universidad del Valle de Guatemala
Programa Tecnológico 4 GN







Ing. José Ardon
CSS3







Propiedades de CSS3 para Drag & Drop




Diego Alexander López Yaqui.






Guatemala 1 de agosto del2013








ÍNDICE
INTRODUCCIÓN ………………………………….……………………………………3
DRAG AND DROP PARA WINDOWS ……………………………………………….4
DRAG AND DROP PARA FIREFOX ……………………………………………….8
DRAG AND DROP CON HTML 5 ……………………………………………………10
CONCLUSIONES ………………………………………….…………………………....12
INFOGRAFÍA ………………………………….…………………….………………13









INTRODUCCION

A continuación encontraremos una serie deelementos que nos ayudaran a obtener mejores resultados en nuestros proyectos.
Drag & Drop es una nueva API incluida en HTML5 que nos sirve para crear la capacidad de arrastras y soltar un elemento de un lugar a otro.
Para activar esta tecnología sólo tenemos que añadirle la propiedad draggable al elemento dónde queremos que active el efecto de arrastrar. Además, esta API incluye 7 nuevos eventosque nos permiten controlar las todas las acciones posibles del elemento.


NOVEDADES EN HTML 5
Los creadores del estándar HTML5, parece que han visto que esta característica es importante y que necesita ser mucho más exprimida para dar mucho más juego a las aplicaciones webs. A continuación os cito las principales novedades del estándard en este tema:
Nuevos eventos en el DOM: dragstart, drag,dragenter, dragover, dragleave, drop, dragend.
Nuevo atributo para los elementos DOM para hacerlo arrastrable: draggable=”true”.
Se permite adicionar información en el elemento arrastrable para que el contenedor pueda recibirla.
Posibilidad de establecer la imagen “ghost” mostrada mientras se arrastra.
Posibilidad de añadir efectos del estilo: copiar, mover, vínculo,  etc.
Además, estacaracterística va más allá de la propia web, dándonos la posibilidad de arrastrar elementos entre distintas webs e incluso aceptar elementos de otras aplicaciones como arrastrar un texto de un procesador de texto o un fichero del sistema.
Los nuevos eventos
Vamos a listar los nuevos eventos que nos trae HTML5 para drag & drop y luego veremos un ejemplo de implementación para que veáis lo fácil yrápido que se implementa.
Dragstart
Comienza el arrastrado. El “target” del evento será el elemento que está siendo arrastrado.
Drag
El elemento ha sido movido. El “target” del evento será el elemento arrastrado.
Dragenter
Se dispara cuando un elemento que está siendo arrastrado entra en un contenedor. El “target” del evento será el elemento contenedor.
Dragover
El elemento ha sido movidodentro del contenedor. El “target” del evento será el elemento contenedor. Como el comportamiento por defecto es denegar el “drop”, la función debe retornar el valor “false” o llamar a “preventDefault” para que indicar que se puede el soltar elemento.
Dragleave
El elemento arrastrado ha salido del contenedor. El “target” del evento será el elemento contenedor.
Drop
El elemento arrastrado has sidoéxitosamente soltado en el elemento contenedor. El “target” del evento será el elemento contenedor.
Dragend
Se ha dejado de arrastrar el elemento, con éxito o no. El “target” del evento será el elemento arrastrado.
Vamos a ver un ejemplo de cómo hacer un elemento arrastable usando jQuery.


Y ahora la otra parte, creamos un contenedor que esté a la espera de elementos arrastrables.



Creoque el código no requiere de mucha explicación pues simplemente establece las funciones para cada evento, aunque creo que es importante reseñar que gracias al objeto dataTransfer se puede compartir información entre el elemento arrastrado y el contenedor, lo veremos a fondo a continuación.
Transfiriendo información con dataTransfer

Como ya hemos dicho, una de las características más...