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

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

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

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

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

тестовый сайт, на котором я его запускаю, -http://www.pudle.co.uk/mov/draggable.html и я также сделал jsfiddle -http://jsfiddle.net/t9Ecz/.

любая помощь ценится, спасибо.

31
draggable jquery jquery-ui jquery-ui-draggable

2 ответов

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

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

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

вы могли бы быть заинтересованы в jQuery mobile как хорошо.

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

57

Я просто решил эту проблему, используя https://github.com/furf/jquery-ui-touch-punch это было почти идеальное падение в решении, но у меня была проблема, когда при перетаскивании моего перетаскиваемого элемента экран продолжал бы прокручиваться непредсказуемо, если бы страница была больше, чем видовое окно.

Я решил эту проблему, заставив окно.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);
        }
    });
13