JavaScript拖放在iPad上不起作用

Question

我有這個拖放代碼，除了在iPad上以外，它都可以正常工作，任何人都可以給出原因嗎？

它似乎無法識別它可以被拖動而不是其他任何東西的事實

JS小提琴

<span class="draggable" id="drag1" draggable="true" ondragstart="drag(event)">drag</span>
<span class="draggable" id="drag2" draggable="true" ondragstart="drag(event)">drop</span>
<br />
This is a sample 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
and 
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
sentence.

JavaScript：

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.parentNode.replaceChild(document.getElementById(data), ev.target);
        document.getElementById(data).className = "";
      }

Answer 1

您的問題是大多數移動瀏覽器不支持HTML5中的“拖放”功能（帶有少量JavaScript）。 單擊此處以獲取支持的列表。

我建議使用支持所有移動瀏覽器的替代方法。 請參閱帶有更多說明的評論： https : //stackoverflow.com/a/9547931/2482557

您可能需要研究以下內容： jQuery UI Touch Punch

Answer 2

iOS 11最終將正確地支持draggable="true" （ http://caniuse.com/#feat=dragndrop ）。 在此之前，對於所有其他設備，您可以使用polyfill，例如https://www.npmjs.com/package/drag-drop-polyfill或https://github.com/Bernardo-Castilho/dragdroptouch來插入功能無需修改您的代碼。