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

• javascript
• html
• ipad
• drag-and-drop
• touch

1 Answer 1

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