Capítulo 3

Drag and Drop, arrastrar y soltar

 Drag & Drop
Una API muy utilizada es la de Arrastrar y Soltar (Drag&Drop). De hecho, las imágenes
en todos los navegadores modernos son “arrastrables”, pero con esta API podremos
hacer zonas en las que se puedan soltar estos objetos, disparando acciones como abrir
un archivo o procesarlos, según sea el caso.

Con esta API también es posible hacer juegos, generalmente pedagógicos, donde
soltamos imágenes o palabras y le indicamos al jugador sus aciertos. De hecho, la
funcionalidad de arrastrar y soltar es la más antigua. Fue desarrollada en 1999 por
Microsoft, y luego fue estandarizada por la W3C. En Internet Explorer, en cualquiera
de sus versiones, no soporta el método .setDragImage.
La compatibilidad de uso de los navegadores es la siguiente:
 3.1 Validar la API Drag&Drop en tu navegador

Esta API es tan antiguo que comúnmente no lo validamos. Modernirz nos da

una excelente herramienta para hacerlo.

Para hacer un objeto HTML arrastrable, tenemos que añadir un atributo en la

etiqueta, por ejemplo:
Ejemplo de la API drag&drop
 3.2 Los eventos en la API Drag&Drop

Los eventos son el centro para controlar el “arrastrar” y “soltar” de los

objetos en la aplicación. En el objeto u objetos que vamos a arrastrar
debemos incluir un evento de tipo ondragstart=”funcion(event)”, con el cual
se lanzará la función después de que el usuario inicie el proceso de arrastrar
el objeto. Observe que necesitamos escribir el parámetro como event, de lo
contrario le mandará un mensaje de error en la consola.

El nombre de la función puede ser cualquier nombre que sea válido en

JavaScript. En el objeto donde vamos a soltar el objeto, necesitamos dos
eventos:
drag=”funcion(event)”: indica cuando se arrastra el objeto.
ondragover=”funcion(event)”: indica cuando el objeto pasa sobre la zona.
 preventDefault()

Es muy importante cambiar el comportamiento por omisión, tanto del objeto

que arrastramos (drag), como del objeto donde soltamos (drop). Por omisión
tampoco puede arrastrar objetos y se pueden soltar elementos HTML en
otros HTML. Por lo general, el navegador intentará abrir el objeto soltado
como una URL, y no es lo que queremos. En ambos casos necesitamos utilizar
el método preventDefault().
 dataTransfer.setData

Se usa el método dataTransfer.setData(“text”,e.target.id), con el cual

almacenamos el identificador del objeto que estamos arrastrando e
indicamos el tipo de dato de este nombre. Esto es muy útil cuando
arrastramos varios objetos a la vez, pero hay que realizarlo aun cuando sólo
arrastremos un objeto.
El método dataTransfer.setData(“text”,e.target.id) sólo se puede ejecutar
cuando lanzamos un evento ondragstart. Los formatos pueden ser “text” y
“URL”.
 3.3 Añadir, Clonar y Borrar elementos

La tarea de duplicar o clonar, así como la de borrar un elemento arrastrado,

es propia de la lista de visualización o DOM, más que propia de la API
drag&drop.
Para duplicar utilizaremos el método cloneNode(true) y asignaremos un
appendChild() al objeto clonado. Para eliminarlo emplearemos el método
removeChild(nodoArrastrado).
Como estamos arrastrando una imagen, si no colocamos el método
e.preventDefault() el navegador abrirá la imagen en forma independiente en
la misma pestaña.
Para clonar la imagen debemos de crear un nombre de identificador
diferente, ya que no pueden repetirse, por lo que utilizamos una variable
llamada contador.
Segundo ejemplo de la API drag&drop
Segundo ejemplo de la API drag&drop
Segundo ejemplo de la API drag&drop
 3.4 Eventos para las zonas para soltar
los objetos (droppables)

Podemos controlar los eventos de las zonas donde soltamos elementos o

“droppables”. Vamos a tener dos eventos adicionales:
 ondragenter: se dispara al momento en que el usuario arrastra el objeto
sobre el área.
 ondragleave: se activa cuando el usuario saca el objeto “arrastrable” del
área.
Eventos para las zonas “dropables”
Eventos para las zonas “dropables”
Eventos para las zonas “dropables”