Android 在触摸屏移动设备上启用拖放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2034334/
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
enabling drag and drop on a touchscreen mobile device
提问by danwoods
I just recently got an android phone and found that the drag and drop on my site doesn't work! I understand why it wouldn't, but has anyone found a solution to this? I'm using JQuery to implement the D & D...
我最近刚拿到一部安卓手机，发现在我的网站上拖放不起作用！我明白为什么它不会，但有没有人找到解决方案？我正在使用 JQuery 来实现 D & D ...
回答by Jonathan Tonge
I used jQuery UI touch punch - it works by hacking the mousedown, mouseup features and replaces them with touchstart, touchend etc.
我使用了 jQuery UI 触摸打孔 - 它通过破解 mousedown、mouseup 功能并用 touchstart、touchend 等替换它们来工作。
ABOUT: http://touchpunch.furf.com/
关于：http: //touchpunch.furf.com/
SCRIPT: https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js
脚本：https: //raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js
CODE:
代码：
include:
包括：
<script src="jquery.ui.touch-punch.min.js"></script>
after your jquery UI script file in your header.
在您的标题中的 jquery UI 脚本文件之后。
回答by ajl
I used the touchpunch answer above and it worked great. One note on it, though. I found that using the github link on the site (and above):
我使用了上面的 touchpunch 答案，效果很好。不过，关于它的一个注释。我发现使用网站（及以上）上的 github 链接：
SCRIPT: https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js
脚本：https: //raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js
did not work for Android devices running mobile Chrome, but the raw, human readable source from the site didwork. This is as of the date of this posting, it may get fixed of course, but in the mean time maybe it will save you a few cycles of debugging.
不适用于运行移动 Chrome 的 Android 设备，但来自该网站的原始、人类可读的源代码确实有效。这是截至本文发布的日期，当然它可能会得到修复，但与此同时，它可能会为您节省几个调试周期。
回答by Codebeat
Old thread I know.......
我知道的旧线程......
I have here an solution that respects any input or other element that has to react on 'clicks' (for example inputs) on a draggable element. This solution made it possible to use any existing drag and drop library that is based upon mousedown, mousemove and mouseup events on any touch device (or cumputer). This is also a cross-browser solution.
我在这里有一个解决方案，它尊重任何输入或其他必须对可拖动元素上的“点击”（例如输入）做出反应的元素。该解决方案使得在任何触摸设备（或计算机）上使用基于 mousedown、mousemove 和 mouseup 事件的任何现有拖放库成为可能。这也是一个跨浏览器的解决方案。
I have tested in on several devices and it works fast (in combination with the drag and drop feature of ThreeDubMedia (see also http://threedubmedia.com/code/event/drag)). It is a jQuery solution so you can use it only with jQuery libs. I have used jQuery 1.5.1for it because some newer functions don't work properly with IE9 and above(not tested with newer versions of jQuery).
我已经在多种设备上进行了测试，它运行速度很快（结合 ThreeDubMedia 的拖放功能（另见http://threedubmedia.com/code/event/drag））。它是一个 jQuery 解决方案，因此您只能将它与 jQuery 库一起使用。我为此使用了jQuery 1.5.1，因为一些较新的函数在 IE9 及更高版本中无法正常工作（未使用较新版本的 jQuery 进行测试）。
Beforeyou add any drag or dropoperation to an event you have to call this function first:
在向事件添加任何拖放操作之前，您必须先调用此函数：
simulateTouchEvents(<object>);
You can also block all components/children for input or to speed up event handling by using the following syntax:
您还可以使用以下语法阻止所有组件/子组件的输入或加速事件处理：
simulateTouchEvents(<object>, true); // ignore events on childs
Here is the code i wrote. I used some nice tricks to speed up evaluating things (see code).
这是我写的代码。我使用了一些不错的技巧来加速评估事物（见代码）。
function simulateTouchEvents(oo,bIgnoreChilds)
{
if( !$(oo)[0] )
{ return false; }
if( !window.__touchTypes )
{
window.__touchTypes = {touchstart:'mousedown',touchmove:'mousemove',touchend:'mouseup'};
window.__touchInputs = {INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,'input':1,'textarea':1,'select':1,'option':1};
}
$(oo).bind('touchstart touchmove touchend', function(ev)
{
var bSame = (ev.target == this);
if( bIgnoreChilds && !bSame )
{ return; }
var b = (!bSame && ev.target.__ajqmeclk), // Get if object is already tested or input type
e = ev.originalEvent;
if( b === true || !e.touches || e.touches.length > 1 || !window.__touchTypes[e.type] )
{ return; } //allow multi-touch gestures to work
var oEv = ( !bSame && typeof b != 'boolean')?$(ev.target).data('events'):false,
b = (!bSame)?(ev.target.__ajqmeclk = oEv?(oEv['click'] || oEv['mousedown'] || oEv['mouseup'] || oEv['mousemove']):false ):false;
if( b || window.__touchInputs[ev.target.tagName] )
{ return; } //allow default clicks to work (and on inputs)
// https://developer.mozilla.org/en/DOM/event.initMouseEvent for API
var touch = e.changedTouches[0], newEvent = document.createEvent("MouseEvent");
newEvent.initMouseEvent(window.__touchTypes[e.type], true, true, window, 1,
touch.screenX, touch.screenY,
touch.clientX, touch.clientY, false,
false, false, false, 0, null);
touch.target.dispatchEvent(newEvent);
e.preventDefault();
ev.stopImmediatePropagation();
ev.stopPropagation();
ev.preventDefault();
});
return true;
};
What it does: At first, it translates single touch events into mouse events. It checks if an event is caused by an element on/in the element that must be dragged around. If it is an input element like input, textarea etc, it skips the translation, or if a standard mouse event is attached to it it will also skip a translation.
它的作用：首先，它将单个触摸事件转换为鼠标事件。它检查事件是否由必须拖动的元素上/中的元素引起。如果它是输入元素，例如 input、textarea 等，它会跳过翻译，或者如果附加了标准鼠标事件，它也会跳过翻译。
Result: Every element on a draggable element is still working.
结果：可拖动元素上的每个元素仍在工作。
Happy coding, greetz, Erwin Haantjes
快乐编码，greetz，Erwin Haantjes
回答by joelg
The iPhone at least has certain events such as ontouchstart, ontouchend, etc. These are part of webkit, but there is much less information with regards Android than iPhone. I think the answer to this question is that the drag and drop functionality needs to use those events rather than the events you would normally use, or needs to use both.
iPhone 至少有一些事件，例如 ontouchstart、ontouchend 等。这些都是 webkit 的一部分，但是关于 Android 的信息比 iPhone 少得多。我认为这个问题的答案是拖放功能需要使用这些事件而不是您通常使用的事件，或者需要同时使用两者。
This article may be of interest - http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html
这篇文章可能很有趣 - http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html
回答by Fenton
There is a jQuery drag and drop plugin that has support for mobiles / touch-screen devices:
有一个支持移动设备/触摸屏设备的 jQuery 拖放插件：
http://plugins.jquery.com/project/mobiledraganddrop
http://plugins.jquery.com/project/mobiledraganddrop
On a mobile device, you tap to pick up the item and tap to select the drop location. This gets around the issue of drag actions being hiHymaned by the device / browser.
在移动设备上，您点击以拿起项目并点击以选择放置位置。这解决了拖动操作被设备/浏览器劫持的问题。
回答by molokoloco
I found an example that work on my Android tablet touchscreen http://www.quirksmode.org/m/tests/drag.htmlIt use "ontouchstart event"
我找到了一个适用于我的 Android 平板电脑触摸屏的示例 http://www.quirksmode.org/m/tests/drag.html它使用“ontouchstart 事件”
