Entendido.

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

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++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

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

Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.

HTML5 (VII)

Arrastrar y soltar

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.

• ondragstart : Se inicia un arrastrado.
• ondrag : se produce con cada movimiento del ratón mientras se arrastra un elemento.
• ondragover : Se produce con cada movimiento del ratón cuando se arrastra un elemento dentro del receptor de soltado.
• ondragenter : El elemento arrastrado entra dentro de un receptor de soltado.
• ondragleave : El elemento arrastrado sale fuera de un receptor de soltado.
• ondrop : se produce al soltar un elemento dentro del receptor de soltado.
• ondragend : se produce al acabar el arrastre, ya sea dentro del receptor de soltado o no.

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

• getData() : Indica el tipo de contenido que debe ser volcado en el evento.
• setData() : Indica el tipo de contenido asociado que queremos recoger del evento.
• clearData() : Para borrar el contenido del evento.

Propiedades

• dropEffect ; Indica el tipo de la operación de arrastrar y soltar. Sus valores pueden ser: none, move, copy, link, copymove, copylink, linkmove, all.
• effectAlowed : Indica el tipo permitido para de arrastrar y soltar. Sus valores pueden ser: none, move, copy, link.

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:

• ev.stopPropagation(); : Con esta línea se impide que algunos elementos como los enlaces tomen su comportamiento por defecto, y que puedan ser arrastrados. Aunque no es obligatoria conviene ponerla.
• ev.preventDefault(); : anula el comportamiento por defecto del navegador, permitiendo así que el elemento se pueda arrastrar.

• data=ev.dataTransfer.getData("text");; : recogemos aquí el valor del atributo id del elemento, el cual habíamos guardado con el método dataTrasfer.setData().
• ev.target.appendChild(document.getElementById(data)); : deja el elemento arrastrado dentro del receptor de soltado. Con ev.target accedemos al nodo del receptor de soltado. Después el método appendChild coloca el elemento arrastrado dentro del receptor de soltado detrás de los elementos que pueda haber en el mismo.

Mostramos aquí el resultado de todo el código anterior:

Elemento arrastrable

Otro elemento arrastrable

• Primer elemento
• Segundo elemento

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

Página creada por ANYELGUTI.

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