jQuery UI Draggable no funciona en dispositivos ios

Estoy usando .arrastrable (parte de la interfaz de usuario de jQuery) para permitir a los usuarios mover elementos como parte de una aplicación web simple. Funciona bien en todos los navegadores de escritorio más recientes para OSX y Windows (excepto Windows Safari, donde solo mueve los elementos verticalmente por alguna razón).

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

¿Hay alguna razón de compatibilidad por la que esto no está funcionando?

Hay otra manera ¿que se podría 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 hecho un jsfiddle - http://jsfiddle.net/t9Ecz/.

Cualquier ayuda muy apreciada, salud.

Author: Perception, 2012-03-03
Source

2 answers

Los dispositivos táctiles como el iPhone carecen de todos los eventos comunes relacionados con el mouse a los que estamos acostumbrados en los navegadores de escritorio. Incluye: mousemove, mousedown, mouseup, entre otros.

Entonces, la respuesta corta es, necesitará usar una solución que tenga en mente contrapartes de "eventos táctiles" para esos "eventos de mouse" anteriores: touchstart, touchmove, touchend o touchcancel.

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

También te puede interesar jQuery mobile.

Espero que sea un comienzo donde pueda encontrar una solución adecuada para sus necesidades.

 57
Author: Zheileman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-03 16:58:19

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

Resolví este problema forzando la ventana.scrollTop & scrollLeft para permanecer igual mientras 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);
        }
    });
 13
Author: Jasdeep Gosal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-13 16:12:06