jQuery UI Draggable nie działa na urządzeniach ios

Question

Używam .draggable (część jQuery UI), aby umożliwić użytkownikom przenoszenie elementów w ramach prostej aplikacji internetowej. Działa dobrze na wszystkich najnowszych przeglądarkach komputerowych dla systemu OSX & Windows (z wyjątkiem Safari systemu Windows, gdzie z jakiegoś powodu przesuwa elementy tylko pionowo).

Głównym problemem, jaki mam, jest to, że nie działa w przeglądarce Safari IOS (na której pierwotnie była kierowana aplikacja).

Czy istnieje przyczyna kompatybilności, która nie działa?

Czy istnieje inny sposób osiągnięcia tego samego efektu?

Witryna testowa, na której ją uruchomiono, to http://www.pudle.co.uk/mov/draggable.html, a także wykonałem jsfiddle - http://jsfiddle.net/t9Ecz/.

Każdy pomaga docenić, okrzyki.

Answer 1

Dotykowe urządzenia takie jak iPhone pozbawione są wszystkich typowych zdarzeń związanych z myszą, do których jesteśmy przyzwyczajeni w przeglądarkach komputerowych. Obejmuje to: mousemove, mousedown, mouseup, między innymi.

Tak, krótka odpowiedź, trzeba będzie korzystać z rozwiązania, które mają na uwadze „zdarzeń dotykowych” odpowiedników dla tych „zdarzeń myszy” powyżej: touchstart, touchmove, touchend lub touchcancel .

Spójrz na to: https://github.com/furf/jquery-ui-touch-punch

Możesz być zainteresowany jQuery mobile również.

Mam nadzieję, że to początek, w którym można znaleźć odpowiednie rozwiązanie dla własnych potrzeb.

Answer 2

Po prostu rozwiązałem ten problem, używając https://github.com/furf/jquery-ui-touch-punch, który był prawie idealnym rozwiązaniem, ale miałem problem z tym, że przeciągając mój element przeciągalny, ekran wciąż przewijał się nieprzewidywalnie, jeśli strona była większa niż okno podglądu.

I rozwiązać ten problem, zmuszając window.scrollTop & scrollLeft pozostać taka sama podczas przeciągania, tj:

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