Las nuevas tendencias llegan a las páginas web con HTML5.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 68
Visitas el mes pasado: 179
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
HTML5 añade una nueva aplicación que permite arrastrar y soltar elementos de un área a otra de la página. La aplicación se hace por medio de Javascript en el cual se incorporan nuevos elementos.
La aplicación funciona en todos los navegadores en su última versión excepto en Safari (diciembre 2013).
Para hacer posible la función de arrastrar y soltar se incorporan nuevos eventos del ratón. Todos ellos crean un objeto "event" que es el elemento desde el que activa el evento.
Todos estos eventos detectan un objeto "event" que recogemos en la función que maneja el evento. Este objeto es, o el objeto arrastrado, o el receptor de soltado. Además permiten realizar diferentes acciones con otros elemento como cualquier función.
Los eventos ondrop y ondragover se aplican al receptor de soltado, los demás eventos se aplican al elemento arrastrado. Explicamos ahora cuáles son estos elementos.
En primer lugar debemos definir qué elementos queremos que puedan arrastrarse. Para ello les pondremos a cada uno de ellos el atributo:
draggable="true"
Este atributo convierte al elemento en un elemento que puede ser arrastrado.
Para detectar el arrastre utilizaremos también el evento ondragstart al cual le asociaremos una función, en la cual pondremos el argumento event para detectar el evento.
<p draggable="true" ondragstart="evdragstart(event)">elemento 1</p>
Esto sería el código básico que aplicamos en HTML5 al elemento arrastrado. Debemos poner siempre el atributo draggable="true". y además como mínimo debemos poner el evento ondragstart. Este evento nos lleva a una función que aquí hemos llamado evdragstart, y que veremos luego. Debemos poner como argumento el objeto event, que da información sobre el evento
Podemos poner también en el elemento arrastrado otros eventos (ondragenter, ondragleave, ondragend, ondrag). Estos no son obligatorios para realizar el arrastre, y se usan cuando se quiere resaltar algún elemento de la página durante el recorrido del elemento en el arrastre.
Éste es el elemento dentro del cual dejamos el elemento arrastrado. De manera predeterminada no existe ningún receptor de soltado, por lo que debemos indicarlo de alguna manera. Puede haber más de un receptor de soltado, siempre y cuando así lo indiquemos.
Para indicar el receptor de soltado, al elemento o elementos que utilicemos para este fin debemos poner los eventos ondragover y ondrop.
<div id="soltado" ondragover="evdragover(event)" ondrop="evdrop(event)"></div>
Aquí los eventos anteriores los recogemos en las funciones evdragover para el evento ondragover, y evdrop para el evento drop. Ambas funciones llevan el objeto event como argumento. Más adelante veremos cómo deben ser estas funciones. A partir de aquí seguimos con el código en javascript.
el objeto event recogido en los eventos anteriores tiene el método dataTransfer que nos permitirá recoger el contenido del objeto arrastrado.
La propiedad dataTransfer tiene a su vez unos métodos y propiedades que se utilizan para obtener la información del objeto arrastrado; por ejempo:
texto=event.dataTransfer.getData("Text");
Esta línea nos devuelve la información del contenido del elemento arrastrado.
Los métodos y propiedades de dataTrasfer son:
Métodos
Propiedades
Los únicos necesarios para realizar un arrastre son los métodos getData() y setData().
Al utilizar los eventos que se aplican al receptor de soltado, debemos utilizar el método preventDefault() sobre el elemento event. Este método elimina el comportamiento por defecto del navegador, permitiendo así el arrastre.
También es conveniente utilizar el método stopPropagation() sobre el elemento event al aplicarlo en el evento ondrop. Evitamos así comportamientos por defecto en algunos elementos, como los enlaces. Estos dejan de comportarse de manera habitual, y pueden ser arrastrados sin abrir la página a la que apuntan.
Haremos aquí un ejemplo de arrastrar y soltar en el que podemos intercambiar elementos entre dos contenedores.
En primer lugar Creamos el código HTML, en el cual ponemos, dentro de un contenedor general, dos contenedores que serán los receptores de soltado. Dentro de éstos pondremos los elementos arrastrables.
<div id="cont0"> <div id="cont1" ondragover="evdragover(event)" ondrop="evdrop(event)"> <p draggable="true" ondragstart="evdragstart(event)" id="e1"> Elemento arrastrable</p> <h5 draggable="true" ondragstart="evdragstart(event)" id="e2"> Otro elemento arrastrable</h5> <ul draggable="true" ondragstart="evdragstart(event) id="e3""> <li>Primer elemento</li> <li>Segundo elemento</li> </ul> </div> <div id="cont2" ondragover="evdragover(event)" ondrop="evdrop(event,this)"> <img src="objetos/espana.gif" alt="españa" draggable="true" ondragstart="evdragstart(event)" id="e4"/> <img src="objetos/europa.gif" alt="europa" draggable="true" ondragstart="evdragstart(event)" id="e5"/> <img src="objetos/italia.gif" alt="italia" draggable="true" ondragstart="evdragstart(event)" id="e6"/> </div> </div>
Observa cómo los receptores de soltado llevan todos los eventos ondragover y ondrop, que nos remiten a unas funciones javascript que luego veremos. También todos los elementos arrastrables llevan el atributo draggable="true" y el evento ondragstart con el argumento event; también deben llevar el atributo id con un valor distinto pàra cada uno de ellos.
El siguiente paso es poner el código CSS, en el cual le damos un espacio y color de fondo a los contenedores. En nuestro caso será el siguiente:
#cont0 { width: 80%; height: 200px; } #cont1 { width: 50%; height: 200px; background-color:#ccffff; float: left; overflow: auto; } #cont2 { width: 50%; height: 200px; background-color:#ffccff; float: left; overflow: auto; }
El siguiente paso es el código javascript. En él incorporamos tres funciones, que se corresponden con los eventos que hemos puesto en el código HTML. Veamos estas funciones una a una. La primera se corresponde con el evento ondragstart que se aplica a los elementos arrastrables, y la escribiremos así:
function evdragstart(ev) { ev.dataTransfer.setData("text",ev.target.id); }
Utilizamos aquí el método dataTransfer.setData() aplicado al evento. Este método lleva dos argumentos. En el primero de ellos "text"se indica el formato, El segundo recoge el valor del atributo id del elemento.
La utilización de la propiedad target nos permite acceder al nodo del elemento al que se aplica, por lo tanto con target.id accedemos al valor de este atributo.
La segunda función se corresponde con el evento ondragover y consiste simplemente en aplicar el método preventDefault() sobre el evento, para que éste no tome el comportamiento por defecto y pueda ser arrastrado el elemento.
function evdragover (ev) { ev.preventDefault(); }
La tercera función se corresponde con el evento ondrop y su misión es hacer que el elemento arrastrado se quede en el receptor de soltado.
function evdrop(ev,el) { ev.stopPropagation(); ev.preventDefault(); data=ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); }
Vamos a explicar el código que hemos puesto en esta función:
Mostramos aquí el resultado de todo el código anterior:
Elemento arrastrable
Mostramos aquí otro ejemplo en el que tenemos un contenedor inicial donde están los elementos que queremos arrastrar, y otro final en el que los dejamos. Sin embargo aquí queremos que al dejar el elemento en el receptor de soltado, éste no desaparezca del contenedor inicial, de manera que podamos ponerlo otra vez de manera repetida en el receptor de soltado.
Para no alargar excesivamente esta página vamos a ver tanto el ejemplo como su código comentado en los siguientes enlaces:
Y el código del ejemplo puedes verlo en este otro enlace:
La diferencia con el ejemplo anterior es que al dejar el elemento en el receptor de soltado, éste no desaparece del contenedor inicial. Para ello creamos una copia del elemento que es la que dejamos en el receptor de soltado, mientras que el propio elemento lo volvemos a colocar en su lugar inicial.
En la siguiente página veremos otra característica de HTML5, la geoloalzación
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com