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
1 Answer
Reset to default 4Your 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