Question

这是我对WHATWG HTML5 Drag and Drop：

的实施

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插件。

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

Answer 1

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

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

希望这适合你。

Answer 2

不幸的是，除了Internet Explorer Mobile 10以及一个不推荐使用的Presto版本的Opera（现在已经被基于Webkit的版本取代）之外，任何移动浏览器目前都不支持拖放。见http://caniuse.com/#feat=dragndrop

最佳解决方案是detect support for drag and drop（确保这不会在支持API的浏览器的移动版本中给出误报），然后使用JavaScript在移动设备上进行填充。这也将有助于在旧版浏览器版本中提供支持拖放的本机支持。

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

Answer 3

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

HTML5拖动; Drop for Mobile

3 个答案: