HTML5 arrastrar y soltar API en dispositivos de pantalla táctil

Question

Me preguntaba si la API HTML5 para arrastrar y soltar incluye soporte para pantallas táctiles.

Estaba pensando en iPhone, pero sé que aún no es compatible. Me preguntaba si eso solo se está poniendo al día por parte de Apple, para soportar HTML5 arrastrar y soltar en Safari móvil, pero también pensé que tal vez la API HTML5 no era lo suficientemente potente para esto, pero lo dudo mucho.

¿Qué tal en una tableta portátil con pantalla táctil estándar o similar, no tengo una, así que no puedo probar, pero me imagino que se incluye soporte porque, hasta donde yo sé, esa interfaz de tabla simplemente reemplaza control del mouse, por lo tanto, en lo que respecta al navegador, el usuario final simplemente está usando un mouse.

¿Alguna idea?

Answer 1

Hay algunos eventos HTML5 nativos que funcionan en WebKit (Chrome & Safari) ... solo versiones móviles. El nombre de estos eventos se touchstart, touchmove, touchend, touchcancel

Un ejemplo para mover un elemento es:

$(document).bind("touchstart", function(e) { 
e.preventDefault(); 
var orig = e.originalEvent; 
var x = orig.changedTouches[0].pageX; 
var y = orig.changedTouches[0].pageY; 

$("#element").css({top: y, left: x}); 
}); 

Más información: http://developer.apple.com/safari/library/documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html#//apple_ref/javascript/cl/TouchEvent

Por cierto yo prefiero trabajar con webkit transformada (Propiedades de CSS) porque tiene un mejor rendimiento.

Buena suerte

Answer 2

hilo viejo, pero ya que tengo un poco de experiencia y todavía es un problema Voy a darle un tiro ...

Touch y arrastrar/soltar realmente no jugar muy bien juntos. Considere que para arrastrar y soltar tiene una secuencia implícita de eventos de mouse-down => mouse-move =>. En un entorno táctil no solo tiene los eventos táctiles, táctiles y táctiles estándar, sino que también tiene gestos reales que tienen significados específicos en varias plataformas. Estos gestos son combinaciones de eventos táctiles, su orden y su sincronización.

Entonces, ¿cómo arrastrarías un elemento usando el tacto? Al capturar el touchstart y touchmove? No. Debido al problema del dedo gordo, casi todos los eventos táctiles tienen un touchstart y un touchmove. También puede tener dos Touchstarts con solo un toque de movimiento ocasionalmente con una pantalla sucia.

¿Qué hay de la captura de inicio táctil y luego esperar para ver si el usuario se ha movido una cierta distancia? No, el problema es que el usuario verá el 'error' cuando ha movido su dedo 15 píxeles (o la distancia) y no pasa nada y luego el elemento de repente se ajusta a la posición de su dedo. La reacción normal es levantar el dedo, que en este escenario iniciaría una caída, la respuesta incorrecta.

Al final, tratar de desarrollar una interfaz donde algunos elementos son estacionarios y otros pueden, pero no tienen que ser, arrastrables está tratando de adaptar un entorno de escritorio a un dispositivo táctil. Los paradigmas no encajan.

Es mejor observar los diversos marcos táctiles y usar los gestos incorporados.

Answer 3

teniendo el mismo problema, aquí hay un par de libres soluciones:

http://touchpunch.furf.com/

http://www.createjs.com/#!/EaselJS/demos/dragdrop