jQuery UI Draggable無法在iOS設備上工作

我正在使用.draggable（jQuery UI的一部分）來允許用戶將項目作爲簡單Web應用程序的一部分移動。它適用於OSX & Windows的所有最新桌面瀏覽器（Windows Safari除外，因爲某些原因它僅垂直移動項目）。jQuery UI Draggable無法在iOS設備上工作

我的主要問題是，它不能在Safari IOS上工作（這是應用程序最初的目標）。

是否有兼容性原因，這是行不通的？

是否有另一種方式可以實現相同的效果？

我運行它的測試網站是http://www.pudle.co.uk/mov/draggable.html，我也做了一個jsfiddle - http://jsfiddle.net/t9Ecz/。

任何幫助非常感謝，歡呼聲。

來源

2012-03-03 sam

像iPhone這樣的基於觸摸的設備缺少我們習慣在桌面瀏覽器中使用的所有常見鼠標相關事件。它包括：mousemove,mousedown,mouseup等等。

所以，簡單的答案是，你需要使用有記「觸摸事件」同行者「鼠標事件」上面的解決方案：touchstart，touchmove，touchend或touchcancel 。

看看這個：https://github.com/furf/jquery-ui-touch-punch

你可能有興趣在jQuery mobile爲好。

希望這是一個開始，您可以找到適合您需求的解決方案。

來源

2012-03-03 16:58:19 Zheileman

得到它的工作，謝謝！ – sam 2012-03-03 17:33:59

@sam你採用什麼方法來使它工作？我現在正在努力解決這個問題。 – 2012-08-15 21:16:37

我想我只是附加jq手機，如果你想這裏是我玩的文件https://www.dropbox.com/s/h7lej7ja3e2crbp/movable.zip – sam 2012-08-17 20:07:46

我剛剛使用https://github.com/furf/jquery-ui-touch-punch解決了這個問題，它幾乎是一個完美的解決方案，但是我拖動可拖動元素時遇到了一個問題，如果頁面大於視口，屏幕會不可預知地滾動。

我解決了這個問題，通過強制window.scrollTop & scrollLeft保持不變的同時拖動，即：

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

來源

2013-02-13 16:12:06

jQuery UI Draggable無法在iOS設備上工作

回答

相關問題