11 Html5APIs

APIs de HTML5
UNA APROXIMACIN
IES IES San San Sebastin Sebastin Huelva Huelva 2012 2012
Lenguajes de Marcas y Sistemas de Gestin J. J. J. Taboada J. Taboada Len Len de la Informacin. HTML5 y CSS3
19/11/2013
Qu es una API?
Interface de Programacin de Aplicaciones Permite que desde HTML5 podamos acceder a potentes
libreras utilizando cdigo Java Script simple:

Canvas Drag and Drop (slo estudiaremos esta API) Geolocation
Storage
File Communication Web worker History y Offline
IES San Sebastin Huelva 2012 Lenguajes de Marcas y Sistemas de Gestin de la Informacin. HTML5 y CSS3
J. J. Taboada Len
19/11/2013
API Drag and Drop (I)

Permite arrastrar y soltar elementos en una pgina web
Para ello la API nos ofrece:
1. Eventos del elemento arrastrado
2. Eventos del destino

3. Objeto con informacin en una operacin de arrastrar y
soltar
IES San Sebastin Huelva 2012
Lenguajes de Marcas y Sistemas de Gestin de la Informacin. HTML5 y CSS3
J. J. Taboada Len
19/11/2013
API Drag and Drop (II)

Eventos elemento a arrastrar
Dragstart drag dragend
Evento lanzado
Cuando el arrastre comienza Durante el arrastre Al soltar elemento
Eventos elemento destino dragenter dragove drop dragleave
Evento lanzado Cuando el puntero del ratn entra en destino Durante arrastre en posible destino Origen es soltado en destino Al salir del destino despus de arrastrar y soltar
J. J. Taboada Len
19/11/2013
API Drag and Drop (III)

Objeto dataTransfer (mtodos) setData(tipo,dato) getData(tipo) clearData(tipo); setDeragImage(elemento,x,y) permite Declarar los datos a enviar Retornar los datos enviados Eliminar datos Mostrar imagen miniatura junto puntero ratn
Objeto dataTransfer (propiedades) types

files dropEffect effectAllowed
retorna Array con los tipos establecidos

Array con informacin de archivos arrastrados Tipo de operacin (none,copy,link,move) Tipos de operaciones permitidos
J. J. Taboada Len
19/11/2013
Ejemplo bsico Drag and Drop
J. J. Taboada Len
19/11/2013
Ejemplo bsico Drag and Drop (I)

DragandDrop1.html
<body>
<section id="caja1"> <img id="imagen1" src="ave1.jpg" width="199" height="143" alt="ave"> </section>

<section id="caja2"></section> <footer id="pie">Estado:</footer> </body>
J. J. Taboada Len
19/11/2013
Ejemplo bsico Drag and Drop (II)

DragandDrop1.css
#caja1, #caja2 {height: 145px; width: 200px; margin: 10px; padding: 10px; float: left; border-top-width: solid thin #9; } #pie { clear: both; height: 40px; border: thin solid #333; width: 500px; }
IES San Sebastin Huelva 2012 Lenguajes de Marcas y Sistemas de Gestin de la Informacin. HTML5 y CSS3
J. J. Taboada Len
19/11/2013
Ejemplo bsico Drag and Drop (III)

DragandDrop1.js
function ini(){ //Referencia a los elementos caja1=document.getElementById('caja1'); imagen=document.getElementById('imagen1'); caja2=document.getElementById('caja2'); pie=document.getElementById('pie'); //Asignar manejadores para eventos del origen caja1.addEventListener('dragstart', ini_arrastrar,false); caja1.addEventListener('drag',arrastrar,false); caja1.addEventListener('dragend',fin_arrastrar,false); //Asingnar manejadores para eventos del destino caja2.addEventListener('dragaenter', function(ev){ev.preventDefault()},false); caja2.addEventListener('dragover', function(ev){ev.preventDefault()},false); caja2.addEventListener('drop', soltar,false); }
J. J. Taboada Len
19/11/2013
Ejemplo bsico Drag and Drop (IV)

DragandDrop1.js
function ini_arrastrar(ev){ ev.dataTransfer.setData("Text",ev.target.id); pie.innerHTML='comienza arrastre'; } function arrastrar(c){ pie.innerHTML='arrastrando'; } function fin_arrastrar(c){ pie.innerHTML='soltado'; } function soltar(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } window.addEventListener('load',ini,false); } IES San Sebastin Huelva 2012 Lenguajes de Marcas y Sistemas de Gestin de la Informacin. HTML5 y CSS3
J. J. Taboada Len
19/11/2013
Actividad
Copia el ejemplo anterior y prueba su funcionamiento en
distintos navegadores
J. J. Taboada Len
19/11/2013

11 Html5APIs

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

11 Html5APIs

Cargado por

Copyright:

Formatos disponibles

APIs de HTML5

libreras utilizando cdigo Java Script simple:

API Drag and Drop (I)

1. Eventos del elemento arrastrado

2. Eventos del destino

IES San Sebastin Huelva 2012

Lenguajes de Marcas y Sistemas de Gestin de la Informacin. HTML5 y CSS3

API Drag and Drop (II)

Eventos elemento destino dragenter dragove drop dragleave

IES San Sebastin Huelva 2012

Lenguajes de Marcas y Sistemas de Gestin de la Informacin. HTML5 y CSS3

API Drag and Drop (III)

Objeto dataTransfer (propiedades) types

retorna Array con los tipos establecidos

Lenguajes de Marcas y Sistemas de Gestin de la Informacin. HTML5 y CSS3

Ejemplo bsico Drag and Drop

IES San Sebastin Huelva 2012

Lenguajes de Marcas y Sistemas de Gestin de la Informacin. HTML5 y CSS3

Ejemplo bsico Drag and Drop (I)

<section id="caja1"> <img id="imagen1" src="ave1.jpg" width="199" height="143" alt="ave"> </section>

Lenguajes de Marcas y Sistemas de Gestin de la Informacin. HTML5 y CSS3

Ejemplo bsico Drag and Drop (II)

Ejemplo bsico Drag and Drop (III)

IES San Sebastin Huelva 2012

Lenguajes de Marcas y Sistemas de Gestin de la Informacin. HTML5 y CSS3

Ejemplo bsico Drag and Drop (IV)

IES San Sebastin Huelva 2012

Lenguajes de Marcas y Sistemas de Gestin de la Informacin. HTML5 y CSS3

También podría gustarte