JQuery UI Draggable не работает на устройствах ios

Я использую .draggable(часть пользовательского интерфейса jQuery), чтобы пользователи могли перемещать элементы в рамках простого веб-приложения. Он отлично работает на всех последних настольных браузерах для OSX и Windows (кроме Windows Safari, где по какой-то причине он перемещает элементы по вертикали).

Основная проблема, с которой я сталкиваюсь, заключается в том, что она не работает в Safari IOS (для которой первоначально предназначено приложение).

Есть ли причина совместимости, которая не работает?

Есть ли другой способ достижения такого же эффекта?

Ответы

Ответ 1

На сенсорных устройствах, таких как iPhone, не хватает всех распространенных событий, связанных с мышью, к которым мы привыкли в настольных браузерах. Он включает в себя: mousemove, mousedown, мышь, среди прочих.

Итак, короткий ответ: вам нужно будет использовать решение, которое имеет в виду "сенсорные события" для тех "событий мыши" выше: touchstart, touchmove, коснуться или touchcancel.

Взгляните на это: https://github.com/furf/jquery-ui-touch-punch

Вам может быть интересен jQuery mobile.

Надеюсь, что это начало, где вы можете найти подходящее решение для своих требований.

Ответ 2

Я просто решил эту проблему, используя 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);
        }
    });