最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

html - JavaScript Drag and Drop not working on iPad - Stack Overflow

programmeradmin5浏览0评论

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

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

JS Fiddle

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

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

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

JS Fiddle

<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 = "";
      }
Share Improve this question asked Jan 30, 2014 at 12:42 tim.bakertim.baker 3,3076 gold badges29 silver badges54 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 4

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 here for a list of what is supported.

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

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

发布评论

评论列表(0)

  1. 暂无评论