Javascript 移动设备上的 HTML 拖放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3172100/
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
HTML Drag And Drop On Mobile Devices
提问by Fenton
When you add drag and drop to a web page using JavaScript, such as jQuery UI draggable and droppable, how do you get this to work when viewed via a browser on a mobile device - where the touch-screen actions for dragging are intercepted by the phone for scrolling around the page etc?
当您使用 JavaScript（例如 jQuery UI 可拖放和可拖放）向网页添加拖放功能时，如何在移动设备上通过浏览器查看时使其工作 - 其中拖放的触摸屏操作被截获用于滚动页面等的电话？
All solutions welcome... my initial thoughts are:
欢迎所有解决方案......我最初的想法是：
Have a button for mobile devices that "lifts" the item to be dragged and then get them to click the zone they want to drop the item on.
Write an app that does this for mobile devices rather then try and get the web page to work on them!
Your suggestions and comments please.
有一个用于移动设备的按钮，可以“抬起”要拖动的项目，然后让它们单击要放置项目的区域。
编写一个为移动设备执行此操作的应用程序，而不是尝试让网页在它们上工作！
请您提出建议和意见。
回答by vichsu
jQuery UI Touch Punch just solves it all.
jQuery UI Touch Punch 可以解决所有问题。
It's a Touch Event Support for jQuery UI. Basically, it just wires touch event back to jQuery UI. Tested on iPad, iPhone, Android and other touch-enabled mobile devices. I used jQuery UI sortable and it works like a charm.
它是对 jQuery UI 的触摸事件支持。基本上，它只是将触摸事件连接回 jQuery UI。在 iPad、iPhone、Android 和其他支持触控的移动设备上进行了测试。我使用了 jQuery UI 可排序，它就像一个魅力。
回答by remdevtec
There is a new polyfill for translating touch events to drag-and-drop, such that HTML5 Drag And Drop is utilizable on mobile.
有一个新的 polyfill 可以将触摸事件转换为拖放，这样 HTML5 拖放就可以在移动设备上使用。
The polyfill was introduced by Bernardo Castilho on this post.
这个 polyfill 是 Bernardo Castilho 在这篇文章中介绍的。
Here's a demofrom that post.
这是该帖子的演示。
The post also presents several considerations of the folyfill design.
该帖子还介绍了 folyfill 设计的几个注意事项。
回答by Joeri Sebrechts
The beta version of Sencha Touchhas drag and drop support.
Sencha Touch的测试版支持拖放。
You can refer to their DnD Example. This only works on webkit browsers by the way.
您可以参考他们的DnD 示例。顺便说一下，这只适用于 webkit 浏览器。
Retrofitting that logic into a web page is probably going to be difficult. As I understand it they disable all browser panning and implement panning events entirely in javascript, allowing correct interpretation of drag and drop.
将该逻辑改造成网页可能会很困难。据我了解，它们禁用所有浏览器平移并完全在 javascript 中实现平移事件，从而允许正确解释拖放。
Update:the original example link is dead, but I found this alternative:
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch
更新：原始示例链接已死，但我找到了这个替代方法：https:
//github.com/kostysh/Drag-Drop-example-for-Sencha-Touch
回答by Tomer Almog
I needed to create a drag and drop + rotation that works on desktop, mobile, tablet including windows phone. The last one made it more complicated (mspointer vs. touch events).
我需要创建一个适用于台式机、移动设备、平板电脑（包括 Windows 手机）的拖放 + 旋转功能。最后一个使它变得更加复杂（mspointer 与触摸事件）。
The solution came from The great Greensock library
解决方案来自伟大的Greensock 图书馆
It took some jumping through hoops to make the same object draggable and rotatable but it works perfectly
使相同的对象可拖动和旋转需要一些跳跃，但它完美地工作
回答by Frosty Z
You might as well give a try to Tim Ruffle's drag-n-drop polyfill, certainly similar to Bernardo Castilho's one (see @remdevtec answer).
您不妨尝试一下Tim Ruffle 的拖放式 polyfill，它当然类似于Bernardo Castilho的（参见 @remdevtec 答案）。
Simply do npm install mobile-drag-drop --save(other installation methods available, e.g. with bower)
简单地做npm install mobile-drag-drop --save（可用其他安装方法，例如使用凉亭）
Then, any element interface relying on touch detection should work on mobile (e.g. dragging only an element, instead of scrolling + dragging at the same time).
然后，任何依赖于触摸检测的元素界面都应该在移动设备上工作（例如，只拖动一个元素，而不是同时滚动+拖动）。
回答by Zoup
The Sortable JS libraryis compatible with touch screens and does not require jQuery.
在可排序的JS库是具有触摸屏的兼容，不需要jQuery的。
The way it handles touch screens it that you need to touch the screen for about 1 second to start dragging an item.
它处理触摸屏的方式是您需要触摸屏幕约 1 秒钟才能开始拖动项目。
Also, they present a video test showing that this library is running faster than JQuery UI Sortable.
此外，他们还提供了一个视频测试，表明该库的运行速度比 JQuery UI Sortable 快。
回答by tedbaker
Jquery Touch Punch is great but what it also does is disable all the controls on the draggable div so to prevent this you have to alter the lines... (at the time of writing - line 75)
Jquery Touch Punch 很棒，但它的作用是禁用可拖动 div 上的所有控件，因此为了防止这种情况，您必须更改行...（在撰写本文时 - 第 75 行）
change
改变
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])){
to read
阅读
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0]) || event.originalEvent.target.localName === 'textarea'
|| event.originalEvent.target.localName === 'input' || event.originalEvent.target.localName === 'button' || event.originalEvent.target.localName === 'li'
|| event.originalEvent.target.localName === 'a'
|| event.originalEvent.target.localName === 'select' || event.originalEvent.target.localName === 'img') {
add as many ors as you want for each of the elements you want to 'unlock'
为要“解锁”的每个元素添加任意数量的 ors
Hope that helps someone
希望能帮助某人
回答by Alper Aydingül
here is my solution:
这是我的解决方案：
$(el).on('touchstart', function(e) {
var link = $(e.target.parentNode).closest('a')
if(link.length > 0) {
window.location.href = link.attr('href');
}
});
