jQuery UI Draggable 不适用于 ios 设备
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9547613/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Draggable not working on ios devices
提问by sam
I am using .draggable (part of jQuery UI) to allow users to move items around as part of a simple web app. It works fine on all the latest desktop browsers for OSX & Windows (except Windows Safari, where it only moves the items vertically for some reason).
我正在使用 .draggable（jQuery UI 的一部分）来允许用户移动项目作为简单 Web 应用程序的一部分。它适用于所有最新的 OSX 和 Windows 桌面浏览器（Windows Safari 除外，因为某些原因它只能垂直移动项目）。
The major problem Im having is it that it doesn't work on Safari IOS (which is where the app is originally targeted for).
我遇到的主要问题是它不能在 Safari IOS（这是应用程序最初针对的地方）上运行。
Is there a compatibility reason this isn't working?
是否有兼容性原因这不起作用？
Is there another way that the same effect could be achieved?
有没有其他方法可以达到同样的效果？
The test site I'm running it on is http://www.pudle.co.uk/mov/draggable.htmland I've also made a jsfiddle - http://jsfiddle.net/t9Ecz/.
我运行它的测试站点是http://www.pudle.co.uk/mov/draggable.html并且我还制作了一个 jsfiddle - http://jsfiddle.net/t9Ecz/。
Any helps much appreciated, cheers.
任何帮助都非常感谢，干杯。
回答by Zheileman
Touch-based devices like iPhone lacks all common mouse related events we are used to in desktop browsers. It does include: mousemove, mousedown, mouseup, among others.
iPhone 等基于触摸的设备缺少我们在桌面浏览器中使用的所有常见鼠标相关事件。它确实包括：mousemove、mousedown、mouseup等。
So, the short answer is, you will need to use a solution that have in mind "touch events" counterparts for those "mouse events" above: touchstart, touchmove, touchendor touchcancel.
因此，简短的回答是，您将需要使用一种解决方案，该解决方案将“触摸事件”对应于上面的“鼠标事件”：touchstart、touchmove、touchend或touchcancel。
Take a look at this: https://github.com/furf/jquery-ui-touch-punch
看看这个：https: //github.com/furf/jquery-ui-touch-punch
You could be interested in jQuery mobileas well.
您也可能对jQuery mobile感兴趣。
Hope it′s a start where you can find a proper solution for your requirements.
希望这是一个开始，您可以找到适合您需求的解决方案。
回答by Jasdeep Gosal
I just solved this problem using https://github.com/furf/jquery-ui-touch-punchit was almost a perfect drop in solution, but I had an issue where while dragging my draggable element around, the screen would keep scrolling unpredictably if the page was larger than the viewport.
我刚刚使用https://github.com/furf/jquery-ui-touch-punch解决了这个问题，这几乎是一个完美的解决方案，但我遇到了一个问题，即在拖动可拖动元素时，屏幕会继续滚动如果页面大于视口，则不可预测。
I solved this issue by forcing the window.scrollTop & scrollLeft to stay the same while dragging, ie:
我通过强制 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);
}
});
