Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

HTML 5 VII

Arrastrar y soltar

Aplicación Arrastrar y soltar

HTML 5 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 no funciona todavía en todos los navegadores, aunque algunos de ellos ya la incorporan.

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 evento que es el elemento arrastrado.

Nuevas funciones para el evento: dataTransfer

Los eventos anteriores crean un objeto "event" que no es otro que el elemento arrastrado. Éste podemos recogerlo en una función javascript del tipo function arrastrar(event) { ... }. Una vez ahi el objeto event tiene el método dataTransfer que nos permitirá recoger el contenido del objeto arrastrado.

El método dataTransfer tiene a su ves 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 más comunes de dataTrasfer son:

Métodos

Propiedades

Todavía no tengo claro cómo funciona todo esto, sin embargo la teoría ahí esta, luego falta que los navegadores vayan adaptandose en sus nuevas versiones.

Ejemplo de funcionamiento de arrastrar y soltar.

Después de buscar en varias páginas hemos encontrado un código que funciona en varios navegadores, y que permite arrastrar y soltar texto. El código que damos a continuación está basado en el de la página http://help.dottoro.com/ljmpcqdb.php. Hemos simplificado el código par obtener sólo los elementos necesarios para poder arrastrar y soltar. El ejemplo funciona sólo en el navegador Mozilla Firefox, por lo que sería conveniente seguir las siguientes explicaciones usando este navegador.

En primer lugar creamos el código en HTML el cual consiste en dos divs, uno llamado "inicio", en donde pondremos el texto y objetos que queremos arrastrar, y otro llamado "final" donde soltaremos los objetos arrastrados:

<div id="inicio" 
     style="width: 300px; height: 150px; background-color: #ccffff; float: left;">
Arrastra todo o parte del texto que hay en este recuadro hacia el 
recuadro de la derecha y suéltalo ahi. Si todo va bien verás cómo 
el texto que has arrastrado se copia en el cuadro de la derecha.
</div>
<div id="final" 
     style="width: 300px; height: 150px; background-color: #ffccff; float: left;">
</div>

A continuación creamos el código javascript: en primer lugar accedemos a los elementos HTML y les aplicamos los eventos para arrastrar: iniciar el arrastre:

window.onload=function () {
   inicioDiv=document.getElementById("inicio");
   finalDiv=document.getElementById("final");
   inicioDiv.ondragstart = coger;
   finalDiv.ondragenter = function() {return false}
   finalDiv.ondragover = function() {return false}
   finalDiv.ondrop = soltar;
}

Accedemos a los divs mediante javascript, el elemento inicio lleva el evento ondragstart, donde accederemos a la información del evento.

El elemento final, debe llevar los eventos ondragenter ondragover ondrop, todos ellos deben devolver false, pero ondrop debe dejar el elemento arrastrado en el div final.

Nos faltan ahora las funciones "coger" (cuando se empìeza a arrastrar el elemento); y "soltar" (cuando se deja de arrastrar el elemento). Las vemos a continuación:

function coger(event) { 
     var format = "text/html" ;
     mitexto = event.dataTransfer.getData(format);
} 
function soltar() { 
     finalDiv.innerHTML=mitexto;
     return false ; 
}

En la función "coger" recogemos el texto en HTML que hemos seleccionado. Observa que al definir la variable mitexto no le hemos puesto "var" delante, lo que le convierte en variable global para poder utilizarla luego en la otra función.

En la función "soltar" volcamos el contenido del elemento arrastrado mediante innerHTML; Al poner el operador igual ( = ) cada vez que arrastramos texto, se borra el anterior. Si ponemos el operador ( += ) el texto se añadirá al ya existente. Como hemos indicado anteriormente la función tiene que devolver false.

Vemos a continuacion en los siguientes recuadros cómo funciona el ejemplo anterior.



Arrastra todo o parte del texto que hay en este recuadro hacia el recuadro de la derecha y suéltalo ahi. Si todo va bien verás cómo el texto que has arrastrado se copia en el cuadro de la derecha.

Con el ejemplo anterior también podemos arrastrar y soltar imágenes , simplemente tenemos que cambiar el contenido del div "inicio" por una serie de imágenes:

<div id="inicio" 
     style="width: 300px; height: 200px; background-color: #ccffff; float: left";>
<img src="espana.gif" alt="espana">
<img src="cataluna.gif" alt="cataluna">
<img src="europa.gif" alt="europa"> 
<img src="inglaterra.gif" alt="inglaterra">
<img src="francia.gif" alt="francia">
<img src="italia.gif" alt="italia"> 
</div>

El resto del código es exactamente igual excepto en la línea de la función "soltar" donde hemos puesto:

finalDiv.innerHTML+=mitexto;

Al poner el operador += la imagen se añade a las que ya tenemos sin borrarse las anteriores. Por supuesto si quieres probar el ejemplo en tu ordenador debes bajarte antes las imágenes y ponerlas en la misma carpeta que el archivo con el código fuente. El resultado será como en los siguientes recuadros.

espana cataluna europa inglaterra francia italia

Como se ha dicho anterioremente estos ejemplos sólo los podrás ver bien en el navegador Mozilla Firefox. Algunos ejemplos más complicados funcionan también en otros navegadores, pero no en todos. Hemos preferido este por la sencillez y claridad en su código.






En la siguiente página veremos cómo poder utilizar HTML 5 en Internet Explorer:

HTML 5 en Internet Explorer



Manual HTML5

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo