ejemplos - jQuery UI Draggable no funciona en dispositivos ios

sortable jquery ejemplos

Question

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

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

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

¿Hay alguna otra manera de 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, vítores.

Answer 1

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

Resolví este problema forzando a window.scrollTop y scrollLeft a permanecer igual mientras arrastraba, 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);
        }
    });

Answer 2

Los dispositivos táctiles como 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.

Por lo tanto, la respuesta breve es que tendrá que usar una solución que tenga en cuenta las contrapartes de "eventos táctiles" para los "eventos de mouse" anteriores: touchstart , touchmove , touchend o touchcancel .

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

También podría estar interesado en jQuery mobile .

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