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”