Menu
I am coding a webpage to be viewed on iPad. It uses Safaris/Webkits drag & drop. I have exactly copied Safari's example drag & drop code but it won't work.
My Problem: The ondrop event is never triggered when I run the webpage (HTML, CSS & Javascript) on Safari Desktop or on Safari on an iPad. On ipad I cannot even drag the elements (the microscope thingie appears & it won't drag when I hold & move my finger over the element). The drag does work on desktop though.
What's going wrong?
The small code example can be found at the very bottom of this page: https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html
<!DOCTYPE html>
<html>
<head>
<title>Drag-and-Drop</title>
<script>
<!--
var dragitem = undefined;
function setdragitem(item, evt) {
dragitem = item;
// alert('item: '+item);
// item is an HTML DIV element.
// evt is an event.
// If the item should not be draggable, enable this next line.
// evt.preventDefault();
return true;
}
function cleardragitem() {
dragitem = undefined;
// alert('item: '+item);
}
function dodrag() {
// alert('item: '+dragitem);
}
// This is required---used to tell WebKit that the drag should
// be allowed.
function handledragenter(elt, evt) {
evt.preventDefault();
return true;
}
function handledragover(elt, evt) {
evt.preventDefault();
return true;
}
function handledragleave(elt, evt) {
}
function handledrop(elt, evt) {
// alert('drop');
dragitem.style.display = "none";
var newid = dragitem.id + '_dest';
var dest = document.getElementById(newid);
dest.innerHTML = dragitem.innerHTML;
}
// -->
</script>
<style>
<!-- .wordbox {
border: 1px solid black;
text-align: center;
width: 50px;
float: left;
-webkit-user-drag: element;
-webkit-user-select: none;
}
.spacer {
clear: both;
}
.target {
margin-top: 30px;
padding: 30px;
width: 70px;
border: 1px solid black;
background: #c0c0ff;
margin-bottom: 30px;
-webkit-user-drop: element;
}
.word {
margin: 30px;
min-height: 30px;
border-bottom: 1px solid black;
width: 50px;
float: left;
}
-->
</style>
</head>
<body>
<p>Drop words onto target area to put them in their places.</p>
<div class='wordbox' id='this' ondragstart='setdragitem(this, event);' ondrag='dodrag();' ondragend='cleardragitem();'>This</div>
<div class='wordbox' id='is' ondragstart='setdragitem(this, event);' ondrag='dodrag();' ondragend='cleardragitem();'>is</div>
<div class='wordbox' id='a' ondragstart='setdragitem(this, event);' ondrag='dodrag();' ondragend='cleardragitem();'>a</div>
<div class='wordbox' id='test' ondragstart='setdragitem(this, event);' ondrag='dodrag();' ondragend='cleardragitem();'>test</div>
<div class='spacer'></div>
<div class='target' ondragenter='handledragenter(this, event);' ondragover='handledragover(this, event);' ondragleave='handledragleave(this, event);' ondrop='handledrop(this, event);'>TARGET</div>
<div class='words'>
<div class='word' id='this_dest'></div>
<div class='word' id='is_dest'></div>
<div class='word' id='a_dest'></div>
<div class='word' id='test_dest'></div>
</div>
</body>
</html>Here is the JSFiddle (remember the drag & drop is Webkit so only for Safari-this webpage is for ipad only): https://jsfiddle.net/eyM3y/
970
something/someone boring/annoying. something that slows progress. clothes of opposite sex.
This definition probably originated in the theatre of the late 1800s, where male performers wore petticoats to perform as women. Their petticoats would drag on the floor, and so they referred to dressing up as women as “putting on their drags.” By the 1920s, the term “drag” was being used by gay people.
Drag is most commonly associated with gay men dressing up and embodying a “larger-than-life” female persona. Drag queens are flamboyant and this form of drag often involves sequins and feathers but it can also be sleek and edgy.
To inhale smoke from something, especially a cigarette. The detective took a drag on his last cigarette and then crushed the butt beneath his heel. I'm trying to quit smoking, but do you mind if I just take a drag?
Working alternative :
Firstly, use jquery UI http://jqueryui.com/demos/ for drag and drop functionality
and then add this script https://github.com/furf/jquery-ui-touch-punch for playing it in Ipad or Iphone.
Hope it helps.
124
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
