javascript 用于移动设备的 HTML5 拖放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21350874/
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 & Drop for Mobile
提问by VCNinc
This is my implementation of WHATWG HTML5 Drag and Drop:
这是我对 WHATWG HTML5拖放的实现：
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.innerHTML+=" <p>"+document.getElementById(data).innerHTML+"</p>";
}.div {
width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;
}<div class="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="div" ondrop="drop(event)" ondragover="allowDrop(event)">
<button id="drag1" draggable="true" ondragstart="drag(event)" width="336" height="69">Code</button>
<button id="drag2" draggable="true" ondragstart="drag(event)" width="336" height="69">Code</button>
</div>It works fine in Google Chrome, but not in iOS or Android. I have read other topics about this but most of them suggest using jQuery or a JavaScript plugin.
它在 Google Chrome 中运行良好，但不适用于 iOS 或 Android。我已经阅读了有关此的其他主题，但其中大多数建议使用 jQuery 或 JavaScript 插件。
Is it possible to make the HTML drag and drop implementation work on iOS and Android (mobile devices)?
是否可以使 HTML 拖放实现在 iOS 和 Android（移动设备）上工作？
采纳答案by pwdst
Unfortunately Drag and Drop is not currently supported by any mobile browsers except Internet Explorer Mobile 10 onwards and a single deprecated Presto version of Opera (which has now been replaced by Webkit based versions). See http://caniuse.com/#feat=dragndrop
不幸的是，除了 Internet Explorer Mobile 10 和一个不推荐使用的 Presto 版本的 Opera（现在已被基于 Webkit 的版本取代）之外，任何移动浏览器目前都不支持拖放。见http://caniuse.com/#feat=dragndrop
The best solution would be to detect support for drag and drop(ensuring that this does not give you false positives in mobile versions of browsers that do support the API) and then use JavaScript to polyfill on mobile devices. This will also help provide support in legacy browser versions that pre-date native support for drag and drop.
最好的解决方案是检测对拖放的支持（确保这不会在支持 API 的移动版本浏览器中给您误报），然后使用 JavaScript 在移动设备上进行 polyfill。这也将有助于在旧版浏览器中提供支持，这些浏览器版本早于对拖放的本机支持。
You can use the excellent YepNope conditional loading libraryto run the test and then conditionally load one or more scripts to provide JavaScript support for drag and drop, or you could use Modernizrto both carry out the testand load the scripts.
您可以使用优秀的YepNope 条件加载库来运行测试，然后有条件地加载一个或多个脚本以提供 JavaScript 拖放支持，或者您可以使用Modernizr执行测试并加载脚本。
回答by Bernardo
I had the same need and wrote a polyfill that enables HTML5 drag/drop on mobile devices (Android and IOS):
我有同样的需求，并编写了一个 polyfill，可以在移动设备（Android 和 IOS）上启用 HTML5 拖放：
https://github.com/Bernardo-Castilho/dragdroptouch
https://github.com/Bernardo-Castilho/dragdroptouch
Hope this works for you.
希望这对你有用。
回答by amit
Since most of mobile browser still do not support HTML5 drag drop, so just in case some still looking solution, I have created a simple drag and drop that works in most of the mobile browser using Raphael. http://xtrace.blogspot.de/2013/01/simple-drag-and-drop-with-raphael.html
由于大多数移动浏览器仍然不支持 HTML5 拖放，所以为了以防万一一些仍在寻找的解决方案，我创建了一个简单的拖放，它可以在大多数使用 Raphael 的移动浏览器中使用。 http://xtrace.blogspot.de/2013/01/simple-drag-and-drop-with-raphael.html
