問題描述

這是我對 WHATWG HTML5 拖放的實現:

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>

它在 Google Chrome 中運行良好，但在 iOS 或 Android 中卻不行.我已經閱讀過有關此的其他主題，但其中大多數建議使用 jQuery 或 JavaScript 插件.

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.

是否可以讓 HTML 拖放實現在 iOS 和 Android(移動設備)上工作?

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

推薦答案

不幸的是，除 Internet Explorer Mobile 10 及更高版本和單個已棄用的 Presto 版本的 Opera(現已被替換為基于 Webkit 的版本).請參閱 http://caniuse.com/#feat=dragndrop

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

最好的解決方案是檢測對拖放的支持(確保這不會在支持 API 的移動版本的瀏覽器中給你誤報)，然后使用 JavaScript 在移動設備上進行 polyfill.這也將有助于在舊版瀏覽器中提供支持，這些版本早于對拖放的原生支持.

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.

您可以使用優秀的 YepNope 條件加載庫來運行測試，然后有條件地加載一個或多個腳本以提供JavaScript 支持拖放，或者您可以使用 Modernizr 來執行 測試并加載腳本.

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 拖拽移動端的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！