HTML5 拖放Drop for Mobile [英] HTML5 Drag & Drop for Mobile

问题描述

这是我对 WHATWG HTML5 拖放的实现:

function allowDrop(ev) {ev.preventDefault();}功能拖动(ev){ev.dataTransfer.setData("文本",ev.target.id);}函数 drop(ev) {ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.innerHTML+="<p>"+document.getElementById(data).innerHTML+"</p>";}

.div {宽度:350 像素；高度:70 像素；填充:10 像素；边框:1 像素实心 #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">代码</button><button id="drag2" draggable="true" ondragstart="drag(event)" width="336" height="69">代码</button>

它在 Google Chrome 中运行良好，但不适用于 iOS 或 Android.我已经阅读了有关此的其他主题，但其中大多数建议使用 jQuery 或 JavaScript 插件.

是否可以让 HTML 拖放实现在 iOS 和 Android(移动设备)上工作?

解决方案

遗憾的是，除 Internet Explorer Mobile 10 及更高版本和一个已弃用的 Opera Presto 版本(现已由基于 Webkit 的版本).请参阅 http://caniuse.com/#feat=dragndrop

最好的解决方案是检测对拖放的支持(确保这不会在支持 API 的移动版本浏览器中为您提供误报)，然后使用 JavaScript 在移动设备上进行 polyfill.这也有助于在旧版浏览器中提供支持，这些浏览器版本早于对拖放的原生支持.

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

This is my implementation of 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>

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.

Is it possible to make the HTML drag and drop implementation work on iOS and Android (mobile devices)?

解决方案

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

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.

You can use the excellent YepNope conditional loading library to run the test and then conditionally load one or more scripts to provide JavaScript support for drag and drop, or you could use Modernizr to both carry out the test and load the scripts.

这篇关于HTML5 拖放Drop for Mobile的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！