Html 触摸屏设备上的 HTML5 拖放 API
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3382393/
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
HTML5 Drag and Drop API on Touch Screen Devices
提问by Qcom
I was just wondering if the HTML5 API for Drag and Drop included support for touch screen displays.
我只是想知道用于拖放的 HTML5 API 是否包含对触摸屏显示的支持。
I was thinking of iPhone, but I know this isn't supported yet. I was wondering if that is just catching up on the part of Apple, to support HTML5 drag and drop on Safari mobile, but I also was thinking maybe the HTML5 API wasn't powerful enough for this, but I highly doubt that.
我在考虑 iPhone，但我知道这还不支持。我想知道这是否只是赶上 Apple 的一部分，以支持在 Safari 移动设备上的 HTML5 拖放，但我也在想 HTML5 API 可能不够强大，但我非常怀疑这一点。
How about on a standard touch screen laptop tablet or the like, I don't have one so I can't test but I would imagine that support is included because, as far as I know, that table interface just replaces mouse control, so, as far as the browser is concerned, the end-user is really just using a mouse.
在标准触摸屏笔记本电脑平板电脑或类似设备上如何，我没有，所以我无法测试，但我想包括支持，因为据我所知，该表格界面只是取代了鼠标控制，所以，就浏览器而言，最终用户实际上只是在使用鼠标。
Any thoughts?
有什么想法吗？
回答by Jim Hymanson II
Old thread but since I've got some experience and it is still a problem I'll give it a shot...
旧线程，但由于我有一些经验，这仍然是一个问题，我会试一试......
Touch and drag/drop do not really play nicely together. Consider that for drag and drop you have an implied mouse-down => mouse-move => mouse-up sequence of events. In a touch environment you have not only the standard touchstart, touchmove and touchend events but you also have actual gestures that have specific meanings on varous platforms. These gestures are combinations of touch events, their order and their timing.
触摸和拖放并不能很好地结合在一起。考虑到对于拖放，您有一个隐含的 mouse-down => mouse-move => mouse-up 事件序列。在触摸环境中，您不仅有标准的 touchstart、touchmove 和 touchend 事件，而且还有在各种平台上具有特定含义的实际手势。这些手势是触摸事件、它们的顺序和它们的时间的组合。
So how would you drag an element using touch? By capturing the touchstart and touchmove? No. Due to the fat-finger problem, almost every touch event has both a touchstart and touchmove. You can also have two touchstarts with only one touchmove occasionally with a dirty screen.
那么如何使用触摸拖动元素呢？通过捕获 touchstart 和 touchmove？不。由于胖手指问题，几乎每个触摸事件都有 touchstart 和 touchmove。你也可以有两个 touchstarts，偶尔只有一个 touchmove 屏幕脏。
How about capturing touchstart and then waiting to see if the user has moved a certain distance? Nope, the problem there is that the user will see the 'glitch' when he has moved his finger 15 pixels (or whatever distance) and nothing happens and then the element suddently snaps to his finger position. The normal reaction is to lift the finger, which in this scenario would initiate a drop, the wrong answer.
如何捕获 touchstart 然后等待查看用户是否移动了一定距离？不，问题在于当用户将手指移动 15 个像素（或任何距离）并且没有任何反应时，用户会看到“故障”，然后元素突然捕捉到他的手指位置。正常的反应是抬起手指，在这种情况下，这会导致下降，这是错误的答案。
In the end, trying to develop an interface where some elements are stationary and others can, but don't have to be, draggable is trying to fit a desktop environment into a touch device. The paradigms do not fit.
最后，试图开发一个界面，其中一些元素是固定的，而另一些元素可以，但不一定是，draggable 试图将桌面环境融入触摸设备。范式不适合。
Better to look at the various touch frameworks and use the built-in gestures.
最好查看各种触摸框架并使用内置手势。
回答by coto
There are some native HTML5 Events that works in WebKit (Chrome & Safari) ... only mobile versions. The name of these events are touchstart, touchmove, touchend, touchcancel
有一些原生 HTML5 事件适用于 WebKit（Chrome 和 Safari）……仅适用于移动版本。这些事件的名称是 touchstart、touchmove、touchend、touchcancel
An example to move an element is:
移动元素的示例是：
$(document).bind("touchstart", function(e) {
e.preventDefault();
var orig = e.originalEvent;
var x = orig.changedTouches[0].pageX;
var y = orig.changedTouches[0].pageY;
$("#element").css({top: y, left: x});
});
More information: https://developer.apple.com/documentation/webkitjs/touchevent
更多信息：https: //developer.apple.com/documentation/webkitjs/touchevent
BTW I prefer to work with webkit-transform (CSS properties) 'cause it has a better performance.
顺便说一句，我更喜欢使用 webkit-transform（CSS 属性），因为它具有更好的性能。
回答by roman m
Having the same problem, here are a couple of freesolutions:
遇到同样的问题，这里有几个免费的解决方案：
