La API Drag and Drop introduce eventos especficos, mtodos y

propiedades para construir aplicaciones que incorporan

la capacidad de arrastrar y soltar elementos en pantalla.
Eventos
Existen siete eventos para esta API:
dragstart Este evento es disparado por el elemento origen cuando la
operacin de arrastre comienza.
drag Este evento es disparado por el elemento origen mientras una
operacin de arrastre se est realizando.
dragend Este evento es disparado por el elemento origen cuando una
operacin de arrastre es terminada, ya sea
porque la accin de soltar fue exitosa o porque la operacin de arrastre
fue cancelada.
dragenter Este evento es disparado por el elemento destino cuando el
puntero del ratn entra en el rea ocupada
por este elemento. Este evento siempre tiene que ser cancelado
usando el mtodo preventDefault().
dragover Este evento es disparado peridicamente por el elemento
destino cuando el puntero del ratn est
sobre l. Este evento siempre tiene que ser cancelado usando el
mtodo preventDefault().
drop Este evento es disparado por el elemento destino cuando el
elemento origen es soltado en su interior. Este
evento siempre tiene que ser cancelado usando el mtodo
preventDefault().
dragleave Este evento es disparado por el elemento destino cuando el
puntero del ratn sale del rea ocupada
por el mismo.
Mtodos
La siguiente es una lista de los mtodos ms importantes incorporados
por esta API:
setData(tipo, dato) Este mtodo es usado para preparar los datos a ser
enviados cuando el evento dragstart es
disparado. El atributo tipo puede ser cualquier tipo de datos regular
(como text/plain o text/html) o un
tipo de datos personalizado.
getData(tipo) Este mtodo retorna los datos del tipo especificado. Es
usado cuando un evento drop es disparado.
clearData(type) Este mtodo remueve los datos del tipo especificado.
setDragImage(elemento, x, y) Este mtodo reemplaza la imagen en
miniatura creada por el navegador en la
operacin arrastrar y soltar por una imagen personalizada. Tambin
declara la posicin que esta imagen
tendr con respecto al puntero del ratn.
Propiedades
El objeto dataTransfer, que contiene los datos transferidos en una

operacin arrastrar y soltar, tambin introduce

algunas propiedades tiles:
types Esta propiedad retorna un array con todos los tipos establecidos
durante el evento dragstart.
files Esta propiedad retorna un array con informacin acerca de los
archivos que estn siendo arrastrados.
dropEffect Esta propiedad retorna el tipo de operacin actualmente
seleccionada. Los valores posibles son:
none, copy, link y move.
effectAllowed Esta propiedad retorna los tipos de operacin que estn
permitidos. Puede ser declarada para
cambiar las operaciones permitidas. Los posibles valores son: none,
copy, copyLink, copyMove, link,
linkMove, move, all y uninitialized.
4.7 Referencia rpida
En HTML5, Javascript fue mejorado por medio de la adicin de nuevas
funciones y la incorporacin de mtodos nativos.
Elementos
<script> Este elemento ahora tiene a Javascript como el lenguaje por
defecto. El atributo type ya no es necesario.
Selectores
La posibilidad de seleccionar un elemento del documento
dinmicamente desde cdigo Javascript se ha vuelto esencial para
cualquier aplicacin web. Nuevos mtodos han sido incorporados con
este propsito.
getElementsByClassName Este selector nos permite encontrar
elementos en el documento por medio del valor de su
atributo class. Es una adicin a los ya conocidos
getElementsByTagName y getElementById.
querySelector(selectores) Este mtodo usa selectores CSS para
referenciar elementos en el documento. Los
selectores son declarados entre parntesis. Este mtodo puede ser
combinado con otros para construir referencias
ms especficas. Retorna solo el primer elemento encontrado.
querySelectorAll(selectores) Este mtodo es similar a querySelector()
pero retorna todos los elementos que
concuerdan con los selectores especificados.
Eventos
La relevancia de los eventos en las aplicaciones web motiv la
estandarizacin de mtodos ya disponibles en navegadores
lderes.
addEventListener(evento, manejador, captura) Este mtodo es usado
para agregar una escucha para un evento. El
mtodo recibe tres valores: el nombre del evento, la funcin que

responder al evento, y un valor booleano

(verdadero o falso) que indica el orden de ejecucin de varios eventos
disparados al mismo tiempo. Normalmente el
tercer atributo es configurado como false.
removeEventListener(evento, manejador, captura) Este mtodo es
usado para remover una escucha para un evento,
desactivando el manejador. Los valores necesarios son los mismos que
los usados para addEventListener().
APIs
El alcance de Javascript ha sido expandido con un grupo de poderosas
libreras accesibles a travs de interfaces llamadas
APIs.
Canvas Esta API es una API de dibujo, especfica para la creacin y
manipulacin de grficos. Utiliza mtodos Javascript
predefinidos para operar.
Drag and Drop Esta API hace que arrastrar y soltar elementos con el
ratn en la pantalla sea posible tambin en la web.
Geolocation Esta API tiene la intencin de proveer acceso a
informacin correspondiente con la ubicacin fsica del
dispositivo que est accediendo a la aplicacin. Puede retornar datos
como la latitud y longitud utilizando diferentes
mecanismos (como informacin de la red o GPS).
Web Storage Esta API introduce dos atributos para almacenar datos en
el ordenador del usuario: sessionStorage y
localStorage. El atributo sessionStorage permite a los desarrolladores
hacer un seguimiento de la actividad de
los usuarios almacenando informacin que estar disponible en cada
instancia de la aplicacin durante la duracin
de la sesin. El atributo localStorage, por otro lado, ofrece a los
desarrolladores un rea de almacenamiento,
creada para cada aplicacin, que puede conservar varios megabytes
de informacin, preservando de este modo
informacin y datos en el ordenador del usuario de forma persistente.
Indexed Database Esta API agrega la capacidad de trabajar con bases
de datos del lado del usuario. El sistema fue
desarrollado independientemente de previas tecnologas y provee una
base de datos destinada a aplicaciones web.
La base de datos es almacenada en el ordenador del usuario, los datos
son persistentes y, por supuesto, son
exclusivos de la aplicacin que los cre.
File Este es un grupo de APIs desarrollada para proveer la capacidad de
leer, escribir y procesar archivos de usuario.
XMLHttpRequest Level 2 Esta API es una mejora de la vieja
XMLHttpRequest destinada a la construccin de
aplicaciones Ajax. Incluye nuevos mtodos para controlar el progreso
de la operacin y realizar solicitudes cruzadas

(desde diferentes orgenes).

Cross Document Messaging Esta API introduce una nueva tecnologa
de comunicacin que permite a aplicaciones
comunicarse entre s a travs de diferentes cuadros o ventanas.
WebSockets Esta API provee un mecanismo de comunicacin de dos
vas entre clientes y servidores para generar
aplicaciones en tiempo real como salas de chat o juegos en lnea.
Web Workers Esta API potencia Javascript permitiendo el
procesamiento de cdigo detrs de escena, de forma
separada del cdigo principal, sin interrumpir la actividad normal de la
pgina web, incorporando la capacidad de
multitarea a este lenguaje.
History Esta API provee la alternativa de incorporar cada paso en el
proceso de una aplicacin dentro del historial de
navegacin del navegador.
Offline Esta API apunta a mantener las aplicaciones funcionales incluso
cuando el dispositivo es desconectado de la
red.