HTML5拖放移動

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

是否有可能使HTML拖在iOS和Android（移動設備）跌落實施工作？

Answer 1

不幸的是拖放目前不只是移動互聯網瀏覽器10起和Opera的一個過時版本普雷斯托（現已被替換成Webkit內核的版本）的任何移動瀏覽器的支持。請參閱http://caniuse.com/#feat=dragndrop

最好的解決方案是detect support for drag and drop（確保在支持API的移動版瀏覽器中不會出現誤報），然後使用JavaScript在移動設備上進行填充。這也將有助於在傳統瀏覽器版本中支持拖放前的本地支持。

您可以使用優秀YepNope conditional loading library運行測試，然後有條件地裝入一個或多個腳本提供拖放支持JavaScript，或者你可以使用Modernizr雙方開展test並加載腳本。

Answer 2

由於大多數手機瀏覽器仍然不支持HTML5拖放，所以以防萬一有些還在尋找解決方案，我創建了一個簡單的拖放，在大多數使用拉斐爾手機瀏覽器的工作原理。 http://xtrace.blogspot.de/2013/01/simple-drag-and-drop-with-raphael.html

Answer 3

我有同樣的需要，並寫了一個填充工具，使移動設備（Android和iOS）的HTML5拖/放：

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

希望這對你的作品。