JavaScript 拖放在 iPad 上不起作用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21456873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 20:57:37  来源:igfitidea点击:

JavaScript Drag and Drop not working on iPad

javascripthtmlipaddrag-and-droptouch

提问by tim.baker

I have this drag and drop code, which works well except on iPads, can anyone give any reason why?

我有这个拖放代码,除了在 iPad 上运行良好,谁能给出任何理由?

It seams as though it can't recognise the fact it can be dragged as opposed to anything else

它看起来好像无法识别它可以被拖动而不是其他任何东西的事实

JS Fiddle

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:

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 = "";
      }

回答by Nate Kibler

Your problem is that the "drag n' drop" feature native in HTML5 (with a bit of JavaScript) is not supported by most mobile browsers. Click herefor a list of what is supported.

您的问题是大多数移动浏览器不支持 HTML5 原生的“拖放”功能(带有一些 JavaScript)。单击此处获取支持的列表。

I suggest using an alternative approach that supports all mobile browsers. See this comment with more explanation: https://stackoverflow.com/a/9547931/2482557

我建议使用支持所有移动浏览器的替代方法。请参阅此评论更多解释:https: //stackoverflow.com/a/9547931/2482557

This might be something you want to look into: jQuery UI Touch Punch

这可能是您想要研究的内容:jQuery UI Touch Punch

回答by Roben

iOS 11 will finally support draggable="true"properly (http://caniuse.com/#feat=dragndrop). Until then and for all other devices you can use a polyfill such as https://www.npmjs.com/package/drag-drop-polyfillor https://github.com/Bernardo-Castilho/dragdroptouchto plug in the functionality without having to adapt your code.

iOS 11 最终将得到draggable="true"正确支持(http://caniuse.com/#feat=dragndrop)。在此之前,对于所有其他设备,您可以使用 polyfill,例如 https://www.npmjs.com/package/drag-drop-polyfillhttps://github.com/Bernardo-Castilho/dragdroptouch来插入功能无需调整您的代码。