El blog de Iván Argulo

Drag&Drop en dispositivos móviles con jQuery UI... uno que funciona

Hace poco, en uno de los proyectos más largos en los que he trabajado (una página web fantástica para aprender inglés de forma divertida, con vídeos, canciones y actividades), me encontré con un grave problema.

Os pongo en situación: parte del desarrollo incluía implementar Drag&Drop entre elementos (en concreto, para las actividades para aprender inglés). Para simplificar la programación, decidimos utilizar el framework de jQuery llamado jQuery UI (User Interface). Estas herramientas permiten crear fácilmente Drag&Drop, y concentrarte en la funcionalidad que deseas implementar.

Hasta aquí todo correcto, cuando terminamos estábamos muy contentos porque el resultado había sido muy bueno y las actividades funcionaban de maravilla... o no.

Drag&Drop con jQuery UI no funciona en dispositivos móviles

Aunque las actividades de multimedia-english.com funcionaban muy bien en navegadores (Firefox 4+, Internet Explorer 7+, Chrome, Safari, Opera...), en móviles y tablets con pantalla táctil el Drag&Drop de jQuery no funcionaba, haciendo completamente inservibles algunas de estas actividades en estos dispositivos.

Esto no podía ser, y nos pusimos manos a la obra para lograr que el Drag&Drop funcionara en móviles y tablets táctiles. La primera opción que barajamos... jQuery Mobile.

jQuery Mobile, un framework “demasiado” potente

La primera opción que se nos vino a la cabeza fue usar jQuery Mobile. Sin embargo, este es un framework completo, y emplearlo en algo así nos parecía matar mosquitos a cañonazos. Habría que reescribir parte del código, añadir condiciones para detectar el dispositivo del usuario y utilizar una programación diferente en cada caso... algo que quedó completamente descartado para este proyecto en concreto. Teniendo en cuenta que multimedia-english.com tiene 9 tipos diferentes de actividades, y el Drag&Drop se utilizaría sólo en dos de ellas, era necesario seguir buscando alternativas. Y las encontramos.

El golpe definitivo, un plugin para jQuery UI llamado “touch-punch”

Después de investigar varias posibilidades, encontré el plugin llamado “touch-punch”, y dimos el golpe definitivo al Drag&Drop en pantallas táctiles con jQuery.

El funcionamiento de este plugin es bastante sencillo: captura la interacción del usuario en los eventos mouseover, mousemove y mouseout (eventos no táctiles del ratón) y los vincula a los eventos touchstart, touchmove y touchend (eventos táctiles).

Basta con añadirlo justo después de los scripts de jQuery y jQuery UI, y el plugin hace todo lo demás. Por fin, un Drag&Drop en jQuery que funciona en pantallas táctiles.

El plugin se llama jQuery UI Touch Punch y puede descargarse en la web: http://touchpunch.furf.com

Infinitas gracias a su creador, David Furf. Puedes seguirle en Twitter: @furf

Sobre el Autor: Iván Argulo es programador web, con más de 9 años de experiencia en el diseño y programación de todo tipo de páginas web y aplicaciones. Durante los últimos años se dedica principalmente a la programación de páginas web con PHP y MySQL, realizando todo el proceso (desde el análisis hasta la presentación al cliente).