Ir al contenido principal

HTML5: DRAG & DROP NATIVO

HTML5 incorpora muchas funcionalidades y etiquetas que harán la vida más sencilla a los desarrolladores web. En este artículo vamos a ver dos de ellas en dos ejemplos: el Drag & Drop nativo y los nuevos métodos de acceso al árbol DOM. Se supone que en el futuro todos los navegadores deberán implementar todas las características del estándar aunque a día de hoy no todos los navegadores cumplen con estos estándares. Para comprobar el nivel de compatibilidad de la versión de vuestro navegador podéis pulsar sobre el siguiente enlace.

Anteriormente a HTML5 podíamos simular el proceso de Drag & Drop con librerías como MooTools o JQuery. El nuevo HTML5 ya incorpora está característica de forma nativa y vamos a verlo con el siguiente ejemplo.

En en el proceso de Drag & Drop hay un objeto que es arrastrado y otro elemento al que se pueden arrastrar objetos. A continuación explicamos los atributos y métodos que debemos implementar en cada uno de los elementos para que puedan ser arrastrados o arrastrar objetos a él.


Objetos arrastrables

Para hacer un objeto arrastrable debemos añadir los siguientes atributos:

  • draggable = true. Con esto indicamos que el elemento puede ser arrastrado.
  • ondragstart. Aquí se define la función que se llevará a cabo cuando se comience a arrastrar el elemento.
  • ondragend. Aquí se define la acción que se lleva a cabo cuando se termina de arrastrar el elemento.
Objetos a los que podemos arrastrar otros objetos

  • ondragenter. Aquí se define la acción que se lleva a cabo cuando un elemento arrastrable entra dentro del elemento.
  • ondragover. Aquí se define la acción que se realiza cuando un elemento arrastrable está sobre el elemento. Debemos definir que tipos de objetos puedes soltarse aquí.
  • ondragleave. Aquí se define la acción que se ejecuta cuando el elemento arrastrable dejar de estar encima del elemento.
  • ondrop. Aquí se indica la acción que se lleva a cabo cuando se suelte el elemento arrastrable sobre el objeto contenedor.

En el primer ejemplo tenemos dos contenedores en el que tenemos varios personajes de Juegos de Tronos y los tenemos que clasificar en Buenos y Malos. El código completo lo podemos descargar de aquí.

Cada personaje es un enlace (<a>) y está contenido en un fieldset. Hay tres fieldset: uno para personajes, otra para los personajes buenos y otro para los malos.

Para hacer arrastrable a un personaje:

 <a draggable="true" onDragStart="dragItem(this, event)" onDragEnd="dragEnd(this, event)" class="item" id="ES">Eddard Stark</a>

A continuación implementamos las acciones asociadas al drag:


function dragItem(item, event) {
        event.dataTransfer.setData('Dato', item.id);
        item.style.opacity = '0.3';
    }
    
    function dragEnd(item, event) {
        item.style.opacity = '';        
    }

En dragItem nos guardamos el id del elemento arrastrable para tenerlo disponible en el drop y aplicamos transparencia al elemento para distinguir cuando lo estamos arrastrando. En dragEnd restablecemos la opacidad del elemento.


Y por último lo que haríamos sobre el elemento al que se pueden arrastrar elementos es lo siguiente:



<fieldset id="buenos" class="container" onDrop="dropItem(this, event)" onDragEnter="return false" onDragOver="return false">


En las funciones onDragEnter y onDragOver no hacemos nada. Al no hacer nada en onDragOver vamos a permitir que cualquier personaje puede arrastrarse hasta este contenedor. En la función onDrop comprobamos el fieldset al que estamos arrastrando el personaje para cambiar de color el fondo del mismo y posteriormente lo añadimos al contenedor.


function dropItem(target, event) { 
        var dato = event.dataTransfer.getData('Dato');
        var item = document.getElementById(dato)
        if (target.id == 'buenos') {
         item.className = 'item itemBueno';
        } else if (target.id == 'malos') {
         item.className='item itemMalo';
        } else if (target.id == 'origen') {
         item.className='item';
        }
        target.appendChild(item);
    }

En el contenedor al que se arrastran objetos podemos establecer que actúe como una papelera o también como un clonador de objetos. Os pongo lo que habría que poner en la función dropItem para clonar objetos:


function dropItem(target, event) { 
        var dato = event.dataTransfer.getData('Dato');
        var item = document.getElementById(dato);   
        target.appendChild(item.cloneNode(true));
    }


Un ejemplo con la clonación de objetos lo podéis ver aquí. Es parecido al caso anterior aunque ahora tendremos dos contenedores, uno para artículos y otro para la lista de la compra. Iremos arrastrando los artículos a la lista pero ahora no se borrarán porque podemos tener varias unidades de un mismo artículo. Las posibilidades que nos permite el Drag & Drop  son muy amplias y depende de nuestra imaginación el valor añadido que podamos dar a nuestro proyectos.




Por último hemos visto en el primer ejemplo hay dos botones con los que podemos consultar los personajes que hemos arrastrado tanto a buenos como a malos. Para ellos utilizamos las nuevas funciones de HTML5 para acceder al árbol DOM. En nuestro caso utilizamos la función querySelectorAll para recuperar los elementos de tipo <a> dentro de un fieldset concreto.  Aquí tenéis un ejemplo para recuperar los personajes buenos:


 function verBuenos(){
  var buenos = document.querySelectorAll('#buenos a');
  for (var i=0; i < buenos.length; i++) {
   alert(buenos[i].innerHTML);
  }
    }

Espero que os sea útil.

Salu2.

Comentarios

Entradas populares de este blog

Soluciones Alchemy Classic 389 elementos

Hace algún tiempo salió una actualización del Juego Alchemy Classic en la que aparecían más elementos (389 en lugar de 238). Aparte de añadir elementos mejoran algunas traducciones en castellano y mejoran la interfaz, aunque todavía hay algún error en algunos nombres de elementos. Aquí os dejo las soluciones para los que estén atascados y no puedan dormir por las noches: Sustancia primaria Aire=Elemento primario  Fuego=Elemento primario  Agua=Elemento primario  Tierra=Sustancia Primaria Arena=Piedra + Aire Piedra=Tierra + Fuego Arcilla=Arena + Pantano Caliza=Tierra + Amonitas Carbono=Fuego + Madera Cloro=Fuego + Sal + Electricidad CO2(Dióxido de Carbono)=Ceniza + Ácido nítrico Electricidad=Relámpago+ Metales Gas natural= Yacimiento de gas + Pozo Helio=Refinería de gas + Gas Natural Hidrógeno=Electricidad + Agua Hielo=Frío + Agua Imán=Piedra + Metales Metano=Deshechos Vegetales + Pantano Oxígeno=Electricidad + Agua Petróleo=Unidad

JAXB: Leer y escribir ficheros XML

Muchas veces en nuestras aplicaciones debemos manejar documentos XML ( Extensible Markup Language ). Este lenguaje se ha convertido en un estándar para intercambio de datos entre programas y aplicaciones a través de Internet. En un esquema XML (o  XSD ) podemos definir los elementos que pueden aparecer en un documento XML así como las relaciones entre los mismos. JAXB ( Java Architecture for XML Binding ) es un estándar Java para transformar un esquema XML (o  XSD ) en una representación a objetos java. Mediante la API de JAXB podemos mapear un objeto Java a un documento XML ( "marshall" ) y el proceso contrario, es decir, a partir de un esquema XML crear su conjunto de objeto Java asociado ( "unmarshall" ). JAXB Resumiendo lo que nos proporciona JAXB es: Generación de objetos Java a partir de un XSD a través de un compilador Proporciona capacidades de marshall/unmarshall (escribir fichero XML desde java y al contrario) Integración con Maven a través de xj

Matemáticas y cine.

El otro día estaba viendo por la televisión una película llamada 21 blackjack . En una escena de la película el profesor de matemáticas ( Kevin Spacey ) le presenta a uno de sus alumnos la siguiente situación: se encuentra en un concurso en la que debe escoger entre tres puertas (1,2 y 3). En dos de ellas hay una cabra, sin embargo en una de las 3 hay un flamante coche nuevo. El alumno responde que quiere abrir la puerta. El presentador, conocedor de lo que hay detrás de cada puerta decide abrir otra puerta diferente mostrando detrás de ella una cabra. El profesor se dirige al alumno y le pregunta, ¿cambiarías la puerta o te quedarías con la puerta que tienes? Muchos de nosotros cambiaríamos de puerta pensando que es una treta del presentador para engañarnos. ¿Cual elegiríais vosotros? Al comienzo tenemos 1/3 de probabilidades de acertar la puerta donde está el coche. Una vez que el presentador abre la puerta con una cabra, la mayoría de gente piensa que hay la misma probabilidad de