jQuery UI Draggable non funziona su dispositivi ios

Question

Sto utilizzando .draggable (parte dell'interfaccia utente di jQuery) per consentire agli utenti di spostare gli elementi all'interno di una semplice applicazione web. Funziona perfettamente con tutti i più recenti browser desktop per OSX & Windows (eccetto Windows Safari, dove sposta solo gli elementi verticalmente per qualche motivo).

Il problema principale che ho è che non funziona su Safari IOS (che è dove l'applicazione è originariamente mirata per).

Esiste un motivo di compatibilità che non funziona?

C'è un altro modo per ottenere lo stesso effetto?

Il sito di prova su cui sto lavorando è http://www.pudle.co.uk/mov/draggable.html e ho anche creato un jsfiddle - http://jsfiddle.net/t9Ecz/.

Qualsiasi aiuto è molto apprezzato, evviva.

Answer 1

I dispositivi tattili come l'iPhone mancano di tutti gli eventi comuni relativi al mouse a cui siamo abituati nei browser desktop. Comprende: mousemove, mousedown, mouseup, tra gli altri.

Quindi, la risposta breve è, sarà necessario utilizzare una soluzione che ha in mente "eventi touch" controparti per quei "gli eventi del mouse" di cui sopra: TouchStart, TouchMove, touchend o touchcancel .

Date un'occhiata a questo: https://github.com/furf/jquery-ui-touch-punch

si potrebbe essere interessati a jQuery mobile pure.

Spero che sia un inizio dove è possibile trovare una soluzione adeguata alle proprie esigenze.

Answer 2

Ho appena risolto questo problema utilizzando https://github.com/furf/jquery-ui-touch-punch era quasi un perfetto calo di soluzione, ma ho avuto un problema in cui durante il trascinamento del mio elemento trascinabile, lo schermo continuava a scorrere in modo imprevedibile se la pagina era più grande del viewport.

Ho risolto questo problema forzando la window.scrollTop & scrollLeft per rimanere lo stesso durante il trascinamento, vale a dire:

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); 
     } 
    });