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>

它可以在Google Chrome浏览器中正常运行，但不能在iOS或Android中运行。我已经阅读了有关此主题的其他主题，但是其中大多数建议使用jQuery或JavaScript插件。

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

Answer 1

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

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

希望这对您有用。

Answer 2

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

最好的解决方案是检测对拖放的支持（确保这不会在支持 API 的移动版本浏览器中给您带来误报），然后使用 JavaScript 在移动设备上进行填充。这也将有助于在旧版浏览器版本中提供支持，这些版本早于对拖放的本机支持。

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