Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Nuevo HTML5

Las nuevas tendencias llegan a las páginas web con HTML5.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 375

Visitas el mes pasado: 555

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


El futuro del desarrollo web: HTML 5
Desarrollo Web
Manual de HTML5 en español
Alejandro Castillo Cantón
HTML5 Tags
quackit.com
Las novedades de HTML5
Victor Pimentel - Jazztel
HTML5 Novedades en los formularios
BufferOverflow
El sustituto del 'iframe' en HTML5
Gepetto - Globedia
HTML5 drag and drop
w3schools.com
Arrastrar y soltar en HTML5 nativo
html5rocks.com
javascript dataTransfer Description
javascript.gakaa.com
dataTransfer object
help.dottoro.com
localStorage en HTML5
rolandocaldas.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




HTML5 (VII)

Arrastrar y soltar

imagen html5

Aplicación Arrastrar y soltar

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).


Nuevos eventos del ratón

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.


Elementos necesarios


el elemento arrastrado

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.


El receptor de soltado

É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.


Nuevos métodos y propiedades


La propiedad dataTransfer

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().


Otros métodos y propiedades

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.


Ejemplo de arrastrar y soltar

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

Otro elemento arrastrable
  • Primer elemento
  • Segundo elemento
españa europa italia

Otro ejemplo de arrastrar y soltar

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:

Ejemplo drag and drop

Y el código del ejemplo puedes verlo en este otro enlace:

Codigo drag and drop

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

Geolocalización en HTML5



Manual de HTML5

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com