移动设备上的HTML5拖放技术

Question

这是我对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>

在谷歌浏览器上它运作良好，但在iOS或Android上不起作用。我已阅读其他关于此问题的主题，但大部分建议使用jQuery或JavaScript插件。

是否可能使HTML拖放实现在iOS和Android（移动设备）上工作？

- VCNinc

---

请尝试查看此链接：http://touchpunch.furf.com/ - Pedro Estrada

Answer 1

我有同样的需求，并编写了一个 polyfill，可以在移动设备（Android 和 IOS）上启用 HTML5 拖放功能：

https://github.com/Bernardo-Castilho/dragdroptouch

希望这对你有用。

- Bernardo

---

非常好用！除非你在使用 Shadow DOM。 - Jos

非常感谢@bernardo，你的polyfill真是救了我一命，让我不用改变我的代码来支持触摸事件。太棒了！ - Maverick09

这是最好的答案。只需将其放入，一切都开始完美地运作！ - supersan

四年半后，它运行得非常完美。 - André Alçada Padez

我已经尝试了您的解决方案，目前它是有效的。然而，在移动手机上运行时，当我需要在拖放区域内拖动图像以更改位置时，出现了问题，它无法正常工作。请问如何在我的Web应用程序中实现这种操作？请帮助我。 - Wisarut Bholsithi

它是有许可的。不是开源的。 - Cybernetic

Answer 2

很遗憾，除了Internet Explorer Mobile 10及以上版本和单个已弃用的Presto版本的Opera（现已被基于Webkit的版本所取代）之外，任何移动浏览器都不支持拖放功能。请参见http://caniuse.com/#feat=dragndrop。

最好的解决方案是检测是否支持拖放功能（确保这不会在支持API的移动浏览器中产生错误结果），然后使用JavaScript在移动设备上进行polyfill。这也有助于提供对早期没有本地支持拖放功能的旧版浏览器的支持。

您可以使用优秀的YepNope条件加载库来运行测试，然后有条件地加载一个或多个脚本以提供JavaScript支持拖放功能，或者您可以使用Modernizr来执行测试并加载脚本。

- pwdst

---

如果我要使用一个JavaScript库来处理触摸（例如jQuery UI），你有什么推荐？ - VCNinc

这在很大程度上取决于应用程序以及您想要实现的其他内容 - 但是，如果您已经在应用程序中使用了jQuery，那么您可以使用自定义构建的jQuery UI，该构建仅包括拖放组件。您是否正在尝试实现拖放文件上传，将组件移动到页面上？请参见http：//html5please.com/#polyfill以获取填充列表或搜索“drag and drop polyfill”。 - pwdst

我正在尝试构建一个HTML5拖放WYSIWIG网页构建器，类似于webs.com或wix.com - 有什么建议吗？ - VCNinc

唉！浏览器开发者有没有良心在移动版和桌面版之间同时实现任何好的功能？ - Michael

Answer 3

由于大多数移动浏览器仍不支持HTML5拖放功能，因此为了防止一些人仍在寻找解决方案，我使用Raphael创建了一个简单的拖放功能，可在大多数移动浏览器中使用。 http://xtrace.blogspot.de/2013/01/simple-drag-and-drop-with-raphael.html

- amit