这是我对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（移动设备）上工作？
不幸的是，除Internet Explorer Mobile 10及更高版本和Opera的单个Presto版本（现已由基于Webkit的版本取代）之外，当前所有移动浏览器均不支持拖放。参见http://caniuse.com/#feat=dragndrop
最好的解决方案是检测对拖放的支持（确保这不会在支持API的移动版本的浏览器中给您带来误报），然后使用JavaScript在移动设备上进行填充。这还将有助于在旧式浏览器版本中提供支持，而这些版本早于对拖放的本机支持。
您可以使用出色的YepNope条件加载库来运行测试，然后有条件地加载一个或多个脚本以提供对拖放的JavaScript支持，或者可以使用Modernizr来执行测试并加载脚本。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句