Drag and Drop en HTML5

Vemos como conseguir el famoso efecto "drag and drop", arrastrar y soltar, simplemente con las nuevas características de HTML5.

Los llamados eventos de “arrastrar y soltar”, comúnmente conocidos por su término en inglés “Drag and Drop“, son una de las funcionalidades principales y más comunes de las interfaces gráficas actuales, muy utilizados y muchas veces tomados como algo habitual, se han hecho de un lugar en el comportamiento normal de un usuario de Internet.

Estos eventos consisten básicamente en utilizar el ratón o mouse, para mover objetos y/o elementos de una posición a otra, En la actualidad, no podemos imaginarnos un sistema operativo, sin la opción de mover de manera dinámica nuestros archivos o iconos de una ventana, carpeta o unidad a otra equivalente.

Durante años se busco implementar esta clase de funcionalidad a los navegadores web, para ello se hizo uso de librerías de JavaScript e incluso de Flash, tratando de imitar este efecto y poder ofrecer al cliente una experiencia relativamente parecida a lo que diariamente experimenta en el uso de algún Software.

Esta búsqueda y deseo por recrear el efecto rendirá frutos con la implementación de HTML5 para el diseño de sitios web. HTML5, cuenta con las características necesarias para poder crear y manejar esta clase de eventos sin necesidad de recurrir a algún complemento.

Drag and Drop nativo en los navegadores modernos

La propiedad nativa de HTML5 en los navegadores estandarizados, hace que sea mucho más sencillo aplicar este efecto a los elementos, en vez de utilizar alguna API o un Framework de JavaScript para realizar el proceso completo.

La tarea de arrastrar y soltar en un navegador, esta compuesta por dos partes básicas, los atributos HTML5 y la función JavaScript, ¿JavaScript? Así es, no se usará para hacer todo el proceso como antes, pero aún recurriremos a él para llevar acabo parte de la funcionalidad en el manejo de eventos.

Paso 1: crear los elementos

La primera parte de nuestro proceso consiste en crear el o los elementos que serán arrastrados, para ello debemos darle esta propiedad, es por eso que debemos agregar el atributo “draggable” con el valor “true”, dentro de la etiqueta que corresponde al elemento que queremos utilizar.

Este atributo le indicará al navegador que este elemento se puede mover sin alguna objeción, por default los objetos no tienen permitido ser arrastrados, es por ello que si no agregamos el atributo “draggable” el objeto no podrá ser movido.

Paso 2: hacer draggable el elemento

Como segundo paso debemos mandar llamar la función “drag” de Javascript, existen varios formas de hacerlo, una manera sencilla es agregarle el atributo “ondragstart” en cuyo valor mandaremos llamar a la función. Por lo tanto, si queremos hacer que una imagen se pueda arrastrar debemos escribir el siguiente código:

<img id="img" draggable="true" src="http://t0.gstatic.com/images?q=tbn:HQhMN5ibPav1DM:http://thecitylovesyou.com/cinerex/wp-content/uploads/2009/10/500-days-of-summer-soundtrack.jpg" ondragstart="drag(this, event)"/>

En nuestro caso agregaremos la propiedad a un párrafo para así poder incluir texto junto con nuestra imagen:

<p id="parrafo" draggable="true" id="span" ondragstart="drag(this, event)">
<img id="img" src="http://t0.gstatic.com/images?q=tbn:HQhMN5ibPav1DM:http://thecitylovesyou.com/cinerex/wp-content/uploads/2009/10/500-days-of-summer-soundtrack.jpg" /><br/>
<span id="span">Arrastrame!</span>
</p>

Mientras que el Javascript lucirá de ésta manera:

function drag(parrafo, evento) {
evento.dataTransfer.setData('Text', parrafo.id);
}

Paso 3: dar formato a los elementos

Después de crear los elementos que queremos arrastrar, pasamos a darle forma al contenedor donde los soltaremos; para ello podemos elegir un elemento div el cual deberá llevar los atributos “ondrop”, “ondragenter” y “ondragover”.

El atributo “ondrop” permitirá llamar la función Javascript para llevar la tarea una vez que el elemento ha sido soltado sobre el contenedor. Dado que el comportamiento por defecto del navegador es cancelar soltados, devolver false en los atributos “dragenter” y “dragover” permitirá el movimiento.

<div id="contenedor" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false">Contenendor</div>

Por su parte en la función "drop" de Javascript debemos llamar a preventDefault(), para indicar que el soltado es permitido en esa zona.

function drop(contenedor, evento) {
var id = evento.dataTransfer.getData('Text');
contenedor.appendChild(document.getElementById(id));
evento.preventDefault();

}

Vale aclarar que estos eventos nos permiten enviar información junto con el elemento que estamos arrastrado, es por ello que se puede utilizar para importar datos a otro elemento.

Paso 4: Tachan! drag and drop

Con estas funciones y atributos nuestra página ya debe tener la funcionalidad para importar el párrafo al contenedor receptor, y el código HTML final quedaría de la siguiente manera:

Ahora simplemente basta con que agreguemos un poco de estilo a los elementos para darle una mejor presentación a nuestra página. Agregar un color de fondo diferente para el cuerpo y el contenedor, al igual que un borde, ayudará al cliente a distinguir la zona receptora.

En este caso, nuestro espacio de desplazamiento será la ventana del navegador donde se este desplegando nuestro sitio, es por ello que podemos colocar el objeto a desplazar en cualquier lugar que deseemos, incluso si queremos ver mejor el efecto podemos colocar el elemento y el contenedor en dos lugares distantes.

Con estos datos podemos idear una hoja de estilo como la siguiente:<br />
body{
background: #045FB4; /* el color de fondo de nuestra página */
}

div#contenedor{
background: #FFA500; /* color de fondo del contenedor receptor */
border: dotted 8px #FF8000; /* borde de 8 píxeles de tipo punteado */
width:200px; /* anchura de 200 píxeles */
height: 200px; /* altura de 200 píxeles */
position:absolute; /* posición absoluta para indicar margenes en base a la ventana */
bottom:0px; /* margen inferior*/
right:0px; /* margen de la derecha */
color: #045FB4; /* color de la letra */
text-align:center; /* alineación del texto */
}

img#img{
width:120px;
height: 120px;
}

span#span{
color:#FFA500;
font-size:20px;

}

p#parrafo{
width:120px;
text-align:center;
}

El producto final, este drag and drop con html5, será un párrafo compuesto por una imagen y un texto el cual podemos seleccionar, arrastrar y soltar en un elemento div conocido como contenedor, donde quedará localizado una vez que soltemos el botón del mouse. Podemos crear todos los elementos arrastrables que queramos, el punto es hacer un contenedor más grande para no verlos encimados.

¿Qué aplicaciones tiene el drag and drop?

Bueno la respuesta a esa pregunta no la puedo responder únicamente yo, esta herramienta está claramente diseñada para que tu imaginación haga su trabajo. Si requieres algunas ideas para empezar, puedes hacerlo con un proyecto de "carrito de compras", hecho con imágenes de productos las cuales se puedan arrastrar hacia una cesta o carro.

Actualmente son pocos los sitios donde se implementan eventos "drag and drop" debido al aún gran uso de navegadores poco estandarizados como Internet Explorer, sin embargo cada vez es más común ver sitios que toman la iniciativa, tal es el caso de Google Wave, que implementa este procedimiento para que los usuarios puedan compartir los archivos de manera sencilla, simplemente arrastrándolos a la ventana del navegador.