jQuery UI可拖动在iOS设备上无法工作

Question

我正在使用jQuery UI中的.draggable（可拖动）功能，作为一个简单Web应用程序的一部分，允许用户移动项目。它在所有最新的桌面浏览器上运行良好，包括OSX和Windows（除了Windows Safari，在某些情况下只能在垂直方向上移动项目）。

我遇到的主要问题是它在Safari IOS上不起作用（这是该应用程序最初针对的平台）。

是否有兼容性原因导致此问题？

是否有其他方法可以实现相同的效果？

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

非常感谢您的帮助。

- sam

Answer 1

像 iPhone 这样的触摸设备缺乏我们在桌面浏览器中习惯使用的所有常见鼠标相关事件。它包括：mousemove、mousedown、mouseup，等等。

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

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

您也可能会对jQuery移动版感兴趣。

希望这是一个可以找到符合您要求的合适解决方案的起点。

- Zheileman

---

@sam 你是用什么方法让它工作的？我现在正在苦恼这个问题。 - Tony Abou-Assaleh

我想我刚刚附加了jq mobile，如果你想要的话，这里是我玩耍的文件https://www.dropbox.com/s/h7lej7ja3e2crbp/movable.zip - sam

touch punch 对我来说做得很好 :) - anber

TouchPunch非常好用！它让我免于编写任何额外的代码。 - Jamie

他们现在已经拥有了拖放和悬停功能。希望为新用户更新此线程。 - Casey ScriptFu Pharr

Answer 2

我刚使用了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);
        }
    });

- Jasdeep Gosal

---

插件可以正常工作！它可能需要一些修改，但基本功能完全正常。 - Gogol