Get it on Google Play

Drag&Drop multiplataforma PC/móvil con HTML5

08-08-2012
 

Llevo semanas trabajando en un proyecto sobre HTML5, tiene una gran carga de UI que tiene que trabajar sobre PC y móvil. El drag and drop es fundamental, porque en eso se basa el 90% del proyecto, navegar sobre una serie de mapas modernos y antiguos.

A la hora de arrastrar y soltar mediante las pantallas táctiles HTML5 nos ha añadido una serie de eventos en Javascript(‘ontouchstart’,’ontouchmove’ y ‘ontouchend’) que tienen su correspondencia directa con los eventos del ratón(‘onmousedown’,’onmousemove’ y ‘onmouseup’). De esta manera nos resulta fácil empezar a arrastrar:

elemento.onmousedown = startDrag;
elemento.ontouchstart = startDrag;

donde startDrag es una función que hace:

y moveDrag es la función que posiciona el elemento y getCoors retorna las coordenadas del elemento.

Otro lastre que tienen los móviles es su poca potencia, enseguida los colapsas. Por tanto, el Ajax debe trabajar mucho para hacer el máximo numero de operaciones sen el servidor.

Comments

One Response to “Drag&Drop multiplataforma PC/móvil con HTML5”
  1. Juan says:

    Muchas gracias por el post.

Leave a Reply

© Albert Coronado Calzada