jquery - drop - sortable js




jQuery UI Draggable無法在ios設備上運行 (2)

我正在使用.draggable(jQuery UI的一部分)來允許用戶在簡單的Web應用程序中移動項目。 它適用於OSX和Windows的所有最新桌面瀏覽器(除了Windows Safari,它只會出於某種原因垂直移動項目)。

我遇到的主要問題是它不適用於Safari IOS(這是應用程序最初的目標)。

是否有兼容性原因這不起作用?

還有另一種方法可以達到同樣的效果嗎?

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

任何幫助非常感謝,歡呼。


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

因此,簡短的回答是,您將需要使用一個解決方案,其中包含上述“鼠標事件”的“觸摸事件”對應物: touchstarttouchmovetouchendtouchcancel

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

您可能也對jQuery mobile感興趣。

希望從一開始就能找到適合您需求的解決方案。


我剛剛使用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);
        }
    });




jquery-ui-draggable