jQuery UI Draggable无法在ios设备上运行

Question

我正在使用.draggable(jQuery UI的一部分)来允许用户在简单的Web应用程序中移动项目.它适用于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等.

所以,简短的回答是,你需要使用一个解决方案,记住上面那些"鼠标事件"的"触摸事件"对应物:touchstart,touchmove,touchend或touchcancel.

看看这个: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);
        }
    });