web-dev-qa-db-ja.com

iOSデバイスでjQuery UI Draggableが機能しない

.draggable（jQuery UIの一部）を使用して、単純なWebアプリの一部としてユーザーがアイテムを移動できるようにします。 OSXおよびWindowsのすべての最新デスクトップブラウザーで正常に動作します（何らかの理由でアイテムを垂直に移動するWindows Safariを除く）。

私が抱えている大きな問題は、Safari IOS（アプリが最初に対象とする場所）では機能しないことです。

これが機能しない互換性の理由はありますか？

同じ効果を達成できる別の方法はありますか？

私が実行しているテストサイトは http://www.pudle.co.uk/mov/draggable.html であり、jsfiddleも作成しました- http：/ /jsfiddle.net/t9Ecz/ 。

感謝します.

jqueryjquery-uidraggablejquery-ui-draggable
31
sam

IPhoneのようなタッチベースのデバイスには、デスクトップブラウザで使用されている一般的なマウス関連のイベントがすべてありません。 mousemove、mousedown、mouseupなど。

したがって、簡単な答えは、上記の「マウスイベント」に対応する「タッチイベント」を念頭に置いたソリューションを使用する必要があるということです。touchstart 、touchmove、touchendまたは touchcancel。

これを見てください： https://github.com/furf/jquery-ui-touch-punch

jQuery mobile にも興味があるかもしれません。

あなたの要件に合った適切なソリューションを見つけることができる出発点であることを願っています。

59
Zheileman

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);
        }
    });
14
Jasdeep Gosal