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

Question

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

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

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

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

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

Любой помогает высоко ценится, ура.

Answer 1

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

Итак, короткий ответ, вам нужно будет использоватьрешение, которое имеет в виду аналоги «событий касания» для этих «событий мыши», описанных выше: начало касания , касание , касание или касание

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

Вас также может заинтересовать jQuery mobile .

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

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