ARRASTRAR Y SOLTARContenidoARRASTRAR Y SOLTAR _______________________________________________ 1INTRODUCCIN ____________________________________________________________ 1 EVENTOS y ATRIBUTOS _____________________________________________________ 3 DataTransfer ________________________________________________________________ 4 EJEMPLO PASO A PASO _____________________________________________________ 5 ATRIBUTOS PERSONALIZADOS _____________________________________________ 8 ATRIBUTOS PERSONALIZADOS. EJEMPLO ___________________________________ 9 TRANSMITIENDO DATOS. EJEMPLO PASO A PASO __________________________ 10 PRCTICAS ARRASTRAR Y SOLTAR ________________________________________ 14

INTRODUCCINLa combinacin HTML5+API+JavaScript aumenta la funcionalidad de la Web y permite realizar operaciones que hasta ahora eran inalcanzables y quedaban reservadas al uso de tecnologas como Flash. HTML5 permite realizar acciones de arrastrar y soltar (drag & drop) objetos por la Web sin necesidad de instalar ningn Plug-in.

Arrastrar y soltar

Pgina 1

HTML5 no solo permite arrastrar elementos sino que puede cargar informacin en el elemento drag para que el contenedor pueda recibirla, incluso si la operacin se produce entre distintos navegadores o aplicaciones. Esta caracterstica nos da la posibilidad, por ejemplo, de implementar carritos de la compra que permitan la introduccin del producto en el carrito de forma visual.

En la operacin de arrastrar y soltar intervienen dos elementos: drag y drop.

Elemento drag. Es un elemento HTML que tiene como atributo draggable=true. Este atributo modifica el comportamiento del elemento al que acompaa para que pueda ser arrastrado por la pgina.

Este elemento se puede arrastrar Este otro no

Elemento drop. Es un elemento HTML donde se pueden alojar los drag. Para conseguir este efecto se tienen que definir distintos detectores de eventos en HTML e implementar los controladores de eventos (funciones) respectivos en JavaScript.

. function destinoArrastre (e) { funcin JavaScript que //instrucciones JavaScript hace de controlador del } evento ondragover Este elemento se puede arrastrar

Aqu se puede arrastrar .

detector del evento dragover (cuando se pone encima) que ejecuta la funcin destinoArrastre()

Arrastrar y soltar

Pgina 2

Las funciones JavaScript permiten el paso de un parmetro llamado event, este representa al evento que llama a la funcin (colocarse encima del un objeto ondragover-, hacer clic onclic-, etc.). A partir del parmetro que representa al evento es posible acceder a distintas propiedades y mtodos del mismo. Por ejemplo: Llamada a la funcin donde event representa al evento ondragover La funcin overSobre accede al mtodo dropEffect de la API dataTrasnfer a partir del evento que se pas por parmetro function overSobre(e){ e.dataTransfer.dropEffect = 'move'; return false; }

EVENTOS y ATRIBUTOSPara controlar la interaccin del usuario en la operacin de arrastrar y soltar existen los siguiente eventos: TARGET DEL EVENTO (objeto que desencadena el evento)El elemento arrastrado El elemento arrastrado El elemento arrastrado El elemento contenedor

EVENTOdragstart dragend drag dragenter

CUANDO OCURREAl comenzar la operacin de arrastre Se ha dejado de arrastrar el elemento El elemento se est moviendo El elemento ha sido movido dentro de un contenedor (drop). An no ha sido soltado El elemento arrastrado se est moviendo sobre el contenedor El elemento arrastrado ha salido del contenedor El elemento ha sido soltado dentro del contenedor

dragover

El elemento contenedor

dragleave

El elemento contenedor

drop

El elemento contenedor

Arrastrar y soltar

Pgina 3

El atributo/valor que determina que un elemento HTML es mvil es draggable=true y, como hemos visto anteriormente, se aade como atributo a la etiqueta del elemento. Despus de determinar que el atributo draggable de un elemento es true ya se pueden utilizar los eventos caractersticos de la operacin drag & drop.

Desde JavaScript se puede modificar el comportamiento de un elemento utilizando para ello las siguientes instrucciones.var miObjeto = document.getElementById (hObjeto); miObjeto.draggable=true

DataTransferPara poder realizar la operacin de arrastre de objetos HTML se debe utilizar la API DataTransfer. Esta interfaz contiene los mtodos y propiedades necesarios para realizar las operaciones de arrastrar, soltar y comunicar informacin entre los objetos drag y los objetos drop. PROPIEDADESdropEffect (string)

ACCINEspecifica el efecto utilizado en la operacin de arrastre: copy, move,link o none. Indica que operacin de arrastrar y soltar que va a estar permitida (copy, move, link, copyLink, copyMove, linkMove, all, none, uninitialized). Para cada operacin se muestra un smbolo distinto a la hora de hacer el arrastre. Permite almacenar un listado de formatos posibles para alojar en el contenedor. Nmero de tems que estamos arrastrando.

effectAlloweb (string)

types ( stringList )

mozItemCount (unsigned long)

MTODOSvoid clearData (string type) void setData (string type, string data)

ACCINElimina la informacin asociada de un tipo de dato. Permite insertar informacin con un tipo definido. El parmetro type puede tener, entre otros, los siguientes valores: Text, DownloadURL,Files. Devuelve el contenido del tipo establecido. Permite especificar la imagen que se ve cuando se

string getData (string type) setDragImage (DOMElement

Arrastrar y soltar

Pgina 4

image, long x, long y)

arrastra y la distancia x, y del cursor.

En las propiedades y mtodos vistos se determinan los parmetros que se pasan a lasfunciones por medio de las siguientes palabras: string un valor de tipo texto stringList una lista de valores de tipo texto unsigned long un valor de tipo entero en valor absoluto (sin signo) DOMElement la referencia de la imagen del rbol DOM long x un valor de tipo entero largo

EJEMPLO PASO A PASOA continuacin vamos a implementar, paso a paso, una pgina Web que permita realizar operaciones de arrastre. El objetivo es conseguir una pgina Web que permita arrastrar los elementos sobre los cuadros o segn corresponda. y

Inicialmente contamos con una pgina Web que contiene 4 capas (div), cada una con su atributo id y un texto especificaciones de estilo CSS en el bloque

Prueba de drag&drop #DragAguacate,#DragKiwy { display:inline; width: 60px; height: 30px; background-color:#FF0;} #DropDulce, #DropSalado{ float: left; width: 150px; height: 50px;}

Arrastrar y soltar

Pgina 5

#DropDulce { background-color: #8080FF;} #DropSalado { background-color:#0C6;} Kiwy Aguacate DULCE SALADO

A partir de la pgina Web inicial realizaremos las operaciones necesarias para conseguir nuestro objetivo. 1. Incluir el atributo draggable=true en los elementos div que van a ser arrastrables (drag). 2. Definir en los contenedores (drop) los siguientes detectores de eventos con sus respectivas llamadas a las funciones que hacen de controlador de evento. a. ondragover="return overSobre (event)": se activa al estar el elemento drag sobre el contenedor, b. ondrop="return dropSoltar (event)": se activa al soltar el elemento en el contenedor 3. Definir los siguientes detectores de eventos en los elementos drag: a. ondragstart="return starEmpezar (event)": se activa al comenzar la operacin de arrastre b. ondragend="return acabarEnd (event)": se activa al finalizar la operacin de arrastre Con las modificaciones realizadas hasta el momento el cdigo del bloque body quedara como sigue: Kiwy Aguacate DULCE SALADO

4. Aadir las etiquetas en el head de la pgina Web para poder introducir el cdigo JavaScript. .. //Cdigo JavaScript

5. Implementar los manejadores de eventos (funciones JavaScript) para los arrastrables (drag).//Se ejecuta cuando comienza la operacin de arrastre function starEmpezar(e){ //Configurar la operacin permitida e.dataTransfer.effectAllowed = 'move'; //Almacenar la id del elemento arrastrado en dataTransfer e.dataTransfer.setData("Text", e.target.getAttribute('id')); //Indicar la imagen que se ver cuando el usuario est arrastrando //e.target contiene el objeto que empez a arrastrarse e.dataTransfer.setDragImage(e.target, 0, 0); //Valor que devuelve la funcin return true; } //Se ejecuta cuando finaliza la operacin de arrastre function acabarEnd(e){ //limpiar el contenido de dataTransfer e.dataTransfer.clearData("Text"); //valor que devuelve la funcin return true; }

Arrastrar y soltar

Pgina 7

6. Implementar los manejadores de eventos (funciones JavaScript) para los contenedores (drop).//Se ejecuta cuando el objeto arrastable est sobre el objeto contenedor function overSobre(e){ //arrastrable= la id del drag que se almacen en la funcin startEmpezar var arrastrable = e.dataTransfer.getData("Text"); //contenedor= la id del drop que dobre el que se est arrastrando var contenedor = e.target.getAttribute('id'); //determinar si se puede realizar la operacin de soltar el drag sobre el drop if (contenedor == 'DropDulce' && arrastrable == 'DragKiwy') //se puede soltar return false; else //se puede soltar if (contenedor == 'DropSalado' && arrastrable == 'DragAguacate') return false; else return true;//no se puede soltar=>return true } //Se ejecuta cuando se suelta el objeto arrastrable sobre un contenedor function dropSoltar(e){ //arrastrable= la id del drag que se almaceno en la funcin startEmpezar var arrastrable = e.dataTransfer.getData("Text"); //appendClid-> para aadir a la rama del elemento drop //el elemento drag en el DOM //el elemento arrastrable se suelta en el contenedor y queda all fijado e.target.appendChild(document.getElementById(arrastrable)); return false; }

7.

Abrir la pgina Web recin creada en un navegador (se aconseja Chrome y Firefox) y comprobar el buen funcionamiento de la operacin de arrastre.

ATRIBUTOS PERSONALIZADOSHTML5 permite utilizar atributos personalizados para almacenar informacin adyacentente a cualquier objeto HTML. Los atributos personalizados deben comenzar por la cadena data- y continuar con un texto significativo para el programador. Contenido

Utilizando JavaScript se puede acceder a los atributos personalizados utilizando los siguientes mtodos//crea una referencia al objeto HTML con id=miId var elemento=document.getElementById(miId); //devuelve el valor del atributo data-UnTexto var atributo= elemento.getAttribute(data-UnTexto); //Muestra por pantalla el valor alert(atributo);

Arrastrar y soltar

Pgina 8

ATRIBUTOS PERSONALIZADOS. EJEMPLOLa siguiente pgina Web muestra dos botones con el texto Producto1 y Producto2. Al pulsar sobre el botn se muestra en pantalla el precio correspondiente al producto. function IndicarDistancia(laId){ //Crear una referencia del elemento HTML con la id que se pasa por parmetro var miDiv=document.getElementById(laId); //Obtener el valor de atributo 'data-precio' de la referencia miDiv var attr=miDiv.getAttribute('data-precio'); //Obtener una referencia del elemento con id="precio" var miContenedor=document.getElementById('precio'); //Introducir en la cada id=precio el precio correspondiente del producto miContenedor.innerHTML='El precio es '+ attr; } Producto1 Producto2

Arrastrar y soltar

Pgina 9

TRANSMITIENDO DATOS. EJEMPLO PASO A PASOCombinando las operaciones drag&drop con el uso de atributos personalizados es posible transmitir informacin entre distintos elementos HTML. Realizaremos, paso a paso, una pgina Web donde se aplicarn estos mtodos. El objetivo de la prctica es una pgina Web que muestre varias imgenes de frutas y una cesta vaca. A medida que se incorporan las frutas a la cesta, utilizando la operacin drag&drop, se ir mostrando el precio total de la compra y el parcial.

Inicialmente contamos con una pgina Web que contiene 4 imgenes de frutas.. 1 capa (div) para la cesta. 1 capa (div) para los precios individuales de la cesta. 1 capa (div) para el dato del precio total de la cesta. especificaciones de estilo CSS en el bloque .

Cada elemento HTML cuenta con su propio atributo id que debe ser nico.