html5 ArrastrarSoltar

ARRASTRAR Y SOLTAR
Contenido
ARRASTRAR Y SOLTAR _______________________________________________ 1
INTRODUCCIN ____________________________________________________________ 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
INTRODUCCIN
La 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.
<body> <div id="Pelota" draggable="true">Este elemento se puede arrastrar</div> <div>Este otro no</div> </body>
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.
. <script> function destinoArrastre (e) { funcin JavaScript que //instrucciones JavaScript hace de controlador del } evento ondragover </script> <body> <div id=drag draggable="true">Este elemento se puede arrastrar</div> <div id="drop" ondragover=return destinoArrastre (event) >
Aqu se puede arrastrar

</div> . </body>
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 <div .ondragover =return overSobre(event) .> 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 ATRIBUTOS
Para 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
EVENTO
dragstart dragend drag dragenter
CUANDO OCURRE
Al 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
drop
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
DataTransfer
Para 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. PROPIEDADES
dropEffect (string)
ACCIN
Especifica 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)
MTODOS
void clearData (string type) void setData (string type, string data)
ACCIN
Elimina 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 las
funciones 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 PASO

A 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 <head>
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Prueba de drag&drop</title>  <style type="text/css"> #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;} </style> </head> <body>  <div id="DragKiwy"> Kiwy </div> <div id="DragAguacate"> Aguacate </div> <p>  <div id="DropDulce"> DULCE </div> <div id="DropSalado"> SALADO </div> </body> </html>
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:
<body>  <div id="DragKiwy" draggable="true" ondragstart="return starEmpezar(event)"
Arrastrar y soltar
Pgina 6
ondragend="return acabarEnd(event)"> Kiwy </div> <div id="DragAguacate" draggable="true" ondragstart="return starEmpezar(event)" ondragend="return acabarEnd(event)"> Aguacate </div> <p>  <div id="DropDulce" ondragover="return overSobre (event)" ondrop="return dropSoltar (event)"> DULCE </div> <div id="DropSalado" ondragover="return overSobre (event)" ondrop="return dropSoltar (event)"> SALADO </div> </body>
4. Aadir las etiquetas <script></script> en el head de la pgina Web para poder introducir el cdigo JavaScript.
<head> .. <script> //Cdigo JavaScript </script> </head>
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 PERSONALIZADOS
HTML5 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.
<div id=miId data-UnTexto=el valor> Contenido </div>
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. EJEMPLO

La 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.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> 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; } </script> </head> <body>  <button data-precio="100" id="uno" onClick="return IndicarDistancia('uno')"> Producto1</button> <button data-precio="50" id="otro" onClick="return IndicarDistancia('otro')"> Producto2</button> <div id="precio"></div> </body> </html>
Arrastrar y soltar
Pgina 9
TRANSMITIENDO DATOS. EJEMPLO PASO A PASO

Combinando 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 <head>.
Cada elemento HTML cuenta con su propio atributo id que debe ser nico.
<!DOCTYPE HTML> <html> <head> <meta charset=utf-8"> <title>Cesta de frutas</title> <style> #DivCesta { background:no-repeat url(Imagenes/cesta.jpg); width:240px; height:130px; padding-top:70px; padding-left:20px; } </style> </head> <body>  <img src="Imagenes/aguacate.gif" gif" alt="aguacate" id="aguacate"> <img src="Imagenes/kiwy.gif" gif" alt="kiwy" id="kiwy"> <img src="Imagenes/naranjas.gif" gif" alt="naranjas" id="naranjas">
Arrastrar y soltar
Pgina 10
<img src="Imagenes/uvas.gif" gif" alt="uvas" id="uvas">  <div id="DivCesta"></div>  <div id="Parcial"></div>  <div id="Total"></div> </body> </html>
A partir de la pgina Web inicial realizaremos las operaciones necesarias para conseguir nuestro objetivo. 1. Incluir el atributo draggable=true en los elementos HTML <img>, que sern los objetos que se pueden arrastrar. 2. Incorporar en cada una de los bloques <img> un atributo personalizado llamado data-precio que contenga el precio de cada fruta. 3. Definir en los contenedores los siguientes detectores de eventos con sus respectivas llamadas a las funciones que hacen de controlador de evento. a. ondragenter=return enterEntrar(event): se activa al entrar en el contenedor b. ondragover="return overSobre (event)": se activa al estar sobre el contenedor, c. ondrop="return dropSoltar (event)": se activa al soltar el elemento en el contenedor 4. Definir los siguientes detectores de eventos en los elementos drop: 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
<body>  <img src="Imagenes/aguacate.gif" alt="aguacate" id="aguacate" draggable="true" data-precio="5" ondragstart="starEmpezar(event)" ondragend="acabarEnd(event)"> <img src="Imagenes/kiwy.gif" gif" alt="kiwy" id="kiwy" draggable="true" data-precio="3" ondragstart="starEmpezar(event)" ondragend="acabarEnd(event)"> <img src="Imagenes/naranjas.gif" gif" alt="naranjas" id="naranjas" draggable="true" data-precio="2" ondragstart="starEmpezar(event)" ondragend="acabarEnd(event)"> <img src="Imagenes/uvas.gif" gif" alt="uvas" id="uvas" draggable="true" data-precio="4" ondragstart="starEmpezar(event)" ondragend="acabarEnd(event)">  <div id="DivCesta" ondragenter="enterEntrar(event)" ondragover="return overSobre(event)" ondrop="dropSoltar(event)"></div>
Arrastrar y soltar
Pgina 11
 <div id="Parcial"></div>  <div id="Total"></div> </body>
5. Aadir las etiquetas <script></script> en el head de la pgina Web para poder introducir el cdigo JavaScript.
. <head> .. <script> <!- - Cdigo JavaScript - - > </script> </head> ..
8. Definir una variable global que almacene el total del precio de la cesta. 9. Implementar los controladores de eventos (funciones JavaScript) para los arrastrables (drag), en este caso las imgenes.
<script> //Definir una variable global que acumular los precios de las frutas //que se incorporen a la cesta var precioTotal=0; //Se ejecuta cuando comienza la operacin de arrastre function starEmpezar(e){ //Configurar la operacin permitida e.dataTransfer.effectAllowed = 'move'; //Almacenra 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 la imagen 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"); return true } </script>
10. Implementar el controlador de evento overSobre(e). En el caso que nos ocupa, la funcin overSobre(e) slo contiene una instruccin: return false pues se va a permitir introducir todas las imgenes sobre la cesta/contenedor. Si fuera necesario establecer alguna limitacin al contenedor, sera en esta funcin donde se implementara el cdigo para definir las restricciones.
Arrastrar y soltar
Pgina 12
//Se ejecuta cuando la imagen est sobre la cesta function overSobre(e){ return false; }
11. Implementar el controlador de evento dropSoltar(e). Es necesario introducir las rdenes JavaScript necesarias para permitir que se incorporen las frutas a la cesta y se agreguen los precios parciales, adems de incrementar al total cada vez que se aada un nuevo producto.
//Se ejecuta al soltar la fruta sobre la cesta function dropSoltar(e){ //esarrastrable=la id del objeto que se est arrastrando (la fruta) var esarrastrable = e.dataTransfer.getData("Text"); //Crear una referencia la imagen que se arrastra var fruta=document.getElementById(esarrastrable) //Aadir, en el DOM, a la rama del objeto contenedor (la div de la cesta) la imagen e.target.appendChild(fruta); //precio=el contenido del atributo data-precio de la imagen que se est arrastrando var precio=fruta.getAttribute('data-precio'); //Crear una referencia de la capa (div) donde estarn los datos parciales var miParcial=document.getElementById('Parcial'); //Crear una referencia de la capa (div) donde estarn el dato del total var miTotal=document.getElementById('Total'); //Agregar contenido HTML a la capa "Parcial", es decir, los detalles de la compra miParcial.innerHTML = miParcial.innerHTML + esarrastrable + '...' + precio + '<br/>'; //Calcular el precio total sumando el valor acumulado de la variable global: preciototal //al precio que se almacena en el atributo 'data-precio' //parseInt (valorTexto), convierte la cadena valorTexto en numrico precioTotal=precioTotal+parseInt(precio); //Agregar contenido HTML a la capa "Total" miTotal.innerHTML= '<strong>Total de la compra: '+ precioTotal+" <strong>"; //Valor que devuelve la funcin return false; }
12. Abrir la pgina Web recin creada en un navegador (se aconseja Chrome o Safari) y comprobar el buen funcionamiento de la operacin de arrastre.
Arrastrar y soltar
Pgina 13
PRCTICAS ARRASTRAR Y SOLTAR
Hacer una pgina Web que muestre los nmeros del 1 al 10 y dos cuadros, uno para
los pares y otro para los impares. Solo se debe permitir que los nmeros pares sean arrastrados al cuadro de los pares y los nmeros impares al cuadro de los impares.
Hacer una pgina Web que muestre los nmeros del 1 al 10 y dos cuadros, uno para
realizar multiplicaciones y otro para realizar sumas. Al arrastrar los nmeros al cuadro de las sumas se debe mostrar en el cuadro el resultado acumulado de las sumas de los elementos arrastrados en l. En el caso de arrastrar los nmeros al cuadro de las multiplicaciones se debe mostrar la multiplicacin acumulada.
Arrastrar y soltar
Pgina 14

html5 ArrastrarSoltar

Cargado por

Copyright:

Formatos disponibles

html5 ArrastrarSoltar

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

html5 ArrastrarSoltar

Cargado por

Copyright:

Formatos disponibles

ARRASTRAR Y SOLTAR

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

Aqu se puede arrastrar

mozItemCount (unsigned long)

string getData (string type) setDragImage (DOMElement

image, long x, long y)

arrastra y la distancia x, y del cursor.

EJEMPLO PASO A PASO

ATRIBUTOS PERSONALIZADOS. EJEMPLO

TRANSMITIENDO DATOS. EJEMPLO PASO A PASO

PRCTICAS ARRASTRAR Y SOLTAR

También podría gustarte