jQuery UI Arrastrable no funciona en los dispositivos IOS

Question

que estoy usando .draggable (parte de jQuery UI) para permitir a los usuarios mover elementos alrededor como parte de una sencilla aplicación web. Funciona bien en todos los últimos navegadores de escritorio para OSX & Windows (excepto Windows Safari, donde solo mueve los elementos verticalmente por algún motivo).

El principal problema que estoy teniendo es que no funciona en Safari IOS (que es donde la aplicación está dirigida originalmente para).

¿Hay alguna razón de compatibilidad por la que esto no funcione?

¿Hay alguna otra forma en la que se pueda lograr el mismo efecto?

El sitio de prueba en el que lo estoy ejecutando es http://www.pudle.co.uk/mov/draggable.html y también he creado jsfiddle - http://jsfiddle.net/t9Ecz/.

Cualquier ayuda muy apreciada, aplausos.

Answer 1

dispositivos táctiles como el iPhone carece de todos los eventos relacionados con el ratón comunes que estamos acostumbrados en los navegadores de escritorio. Incluye: mousemove, mousedown, mouseup, entre otros.

Por lo tanto, la respuesta corta es, tendrá que usar una solución que tenga en cuenta "eventos de toque" contrapartes de esos "eventos de ratón" más arriba: touchstart, TouchMove, touchend o touchcancel .

Tome un vistazo a esto: https://github.com/furf/jquery-ui-touch-punch

Usted podría estar interesado en jQuery mobile también.

Esperanza Está un comienzo donde se puede encontrar una solución adecuada para sus necesidades.

Answer 2

Acabo de resolver este problema usando https://github.com/furf/jquery-ui-touch-punch fue casi una gota perfecta en la solución, pero tuve un problema donde al arrastrar mi elemento arrastrable, la pantalla seguiría desplazándose impredeciblemente si la página era más grande que la ventana gráfica.

He resuelto este problema al forzar al window.scrollTop & scrollLeft a permanecer igual mientras se arrastra, es decir:

var l_nScrollTop = $(window).scrollTop(); 
    var l_nScrollLeft = $(window).scrollLeft(); 
    $('#draggable_image').draggable({ 
     start: function() { 
      l_nScrollTop = $(window).scrollTop(); 
      l_nScrollLeft = $(window).scrollLeft(); 
     }, 
     drag: function() { 
      $(window).scrollTop(l_nScrollTop); 
      $(window).scrollLeft(l_nScrollLeft); 
     } 
    });