jQuery UI Draggable 在 ios 设备上不起作用答案

【问题标题】：jQuery UI Draggable not working on ios devicesjQuery UI Draggable 在 ios 设备上不起作用
【发布时间】：2012-03-21 19:13:54
【问题描述】：

我正在使用 .draggable（jQuery UI 的一部分）来允许用户在一个简单的 Web 应用程序中移动项目。它适用于所有最新的 OSX 和 Windows 桌面浏览器（Windows Safari 除外，它出于某种原因仅垂直移动项目）。

我遇到的主要问题是它不适用于 Safari IOS（这是应用程序最初的目标）。

这不起作用是否有兼容性原因？

有没有其他方法可以达到同样的效果？

我运行它的测试站点是http://www.pudle.co.uk/mov/draggable.html，我还制作了一个jsfiddle - http://jsfiddle.net/t9Ecz/。

任何帮助都非常感谢，干杯。

【问题讨论】：

标签： jquery jquery-ui draggable jquery-ui-draggable

【解决方案1】：

iPhone 等基于触控的设备缺少我们在桌面浏览器中使用的所有常见鼠标相关事件。它确实包括：mousemove、mousedown、mouseup 等等。

因此，简短的回答是，您需要使用一种解决方案，考虑到上述“鼠标事件”对应的“触摸事件”：touchstart、touchmove、touchend 或 touchcancel。

看看这个：https://github.com/furf/jquery-ui-touch-punch

您也可能对jQuery mobile 感兴趣。

希望这是一个开始，您可以找到适合您需求的解决方案。

【讨论】：

@sam 你采用什么方法让它工作？我现在正在为此苦苦挣扎。
我想我刚刚附加了 jq mobile，如果你想要这里是我正在玩的文件dropbox.com/s/h7lej7ja3e2crbp/movable.zip
触摸打孔为我完成了这项工作:)
触摸打孔效果很好！它使我不必编写任何额外的代码。
他们现在可以拖放和悬停。想要为新用户更新主题。

【解决方案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);
        }
    });

【讨论】：

插件有效！它很可能需要一些修改，但基本的东西就可以了。