Interfaces de «arrastrar y soltar» con HTML5 y JavaScript

Las interfaces gráficas con sistema drag and drop (arrastrar y soltar) nos permiten «tomar» un elemento de la pantalla y desplazarlo hacia otro lugar utilizando el mouse o, en el caso de los dispositivos táctiles, uno de nuestros dedos. Estamos acostumbrados a verlas en aplicaciones de escritorio desde 1984, cuando Apple lanzó la Macintosh 128K (una de las primeras computadoras con interfaz gráfica de usuario). Cambiar la ubicación de íconos o barras de herramientas, mover archivos entre carpetas y desplazar ventanas son usos habituales de esta característica.

A pesar de su antigüedad, el uso de drag and drop en aplicaciones Web todavía no se encuentra suficientemente difundido. En 1999, Internet Explorer (en su versión 5) introdujo un modelo para implementar esta característica; tiempo después, la aparición de Dynamic HTML permitió utilizarla en otros navegadores. Pero requería de un proceso de codificación demasiado arduo para su buen funcionamiento.

Sin embargo, la situación está empezando a cambiar gracias al estándar HTML5. Basándose en el modelo de Internet Explorer 5, el autor de especificaciones Ian Hickson desarrolló una API que simplifica la implementación de módulos para arrastrar y soltar. El blog HTML5 Rocks explica el proceso, basado en la manipulación de eventos de JavaScript.

Gracias a esta API podemos desarrollar varias funciones interesantes. Nuestra aplicación puede permitirles a los usuarios subir archivos arrastrándolos desde su escritorio u organizar el contenido como más les guste (algunos lectores de RSS permiten cambiar la ubicación de los feeds a través de drag and drop). Si desarrollamos un videojuego, podemos implementar funciones tan importantes como el movimiento de las piezas sobre un tablero o el desplazamiento de objetos en una habitación. Sin embargo, la API todavía está en desarrollo y no es soportada por la mayoría de los navegadores de dispositivos móviles. Además, el experto en usabilidad Jakob Nielsen advierte que, en general, los usuarios no se dan cuenta de si un objeto puede arrastrarse y soltarse. Agregar un texto instructivo o un identificador que permita distinguir a los elementos «arrastrables» puede ser de ayuda.