jQuery UI Draggable không hoạt động trên thiết bị ios

Question

Tôi đang sử dụng .draggable (một phần của giao diện người dùng jQuery) để cho phép người dùng di chuyển các mục xung quanh như một phần của ứng dụng web đơn giản. Nó hoạt động tốt trên tất cả các trình duyệt máy tính để bàn mới nhất cho OSX & Windows (ngoại trừ Windows Safari, nơi nó chỉ di chuyển các mục theo chiều dọc vì một số lý do).

Vấn đề chính Có phải là nó không hoạt động trên Safari IOS (nơi ứng dụng ban đầu được nhắm mục tiêu).

Có lý do tương thích nào không hoạt động?

Có cách nào khác có thể đạt được hiệu quả tương tự không?

Trang web thử nghiệm mà tôi đang chạy trên đó là http://www.pudle.co.uk/mov/draggable.html và tôi cũng đã tạo một jsfiddle - http://jsfiddle.net/t9Ecz/.

Bất kỳ giúp đánh giá cao, cổ vũ.

Answer 1

Thiết bị dựa trên cảm ứng như iPhone thiếu tất cả các sự kiện liên quan đến chuột phổ biến mà chúng tôi thường sử dụng trong trình duyệt trên máy tính để bàn. Nó bao gồm: mousemove, mousedown, mouseup, trong số những thứ khác.

Vì vậy, câu trả lời ngắn gọn là, bạn sẽ cần phải sử dụng một giải pháp mà có trong tâm trí "sự kiện touch" đối tác đối với những "sự kiện chuột" ở trên: touchstart, touchmove, touchend hoặc touchcancel .

Hãy xem này: https://github.com/furf/jquery-ui-touch-punch

Bạn có thể quan tâm jQuery mobile là tốt.

Hy vọng đây là sự khởi đầu để bạn có thể tìm ra giải pháp phù hợp với yêu cầu của mình.

Answer 2

Tôi đã giải quyết vấn đề này bằng cách sử dụng https://github.com/furf/jquery-ui-touch-punch nó gần như là một giải pháp giảm hoàn hảo, nhưng tôi gặp vấn đề khi kéo phần tử có thể kéo của mình xung quanh, màn hình sẽ tiếp tục cuộn không thể đoán trước nếu trang lớn hơn khung nhìn.

tôi giải quyết vấn đề này bằng cách buộc window.scrollTop & scrollLeft để giữ nguyên trong khi kéo, ví dụ:

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