Question

我正在使用.draggable（jQuery UI的一部分）来允许用户在简单的Web应用程序中移动项目。它适用于OSX和OS的所有最新桌面浏览器。 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＆amp;解决了这个问题。 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);
        }
    });

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

2 个答案: