拖动&放在Safari iOS上：不会拖动，不会响应桌面/ iPad上的拖放 [英] Drag & Drop on Safari iOS: Won't drag, won't respond to drop on desktop/iPad
问题描述
发生了什么问题？
小代码示例可以在这个页面的最底部： https：// developer .apple.com / library / archive / documentation / AppleApplications / Conceptual / SafariJSProgTopics / DragAndDrop.html
$ b
<！DOCTYPE html>< html>< head> <标题>拖和掉落< /标题> <脚本> <！ - var dragitem = undefined;函数setdragitem（item，evt）{dragitem = item; // alert（'item：'+ item）; // item是一个HTML DIV元素。 // evt是一个事件。 //如果该项目不可拖动，则启用下一行。 // evt.preventDefault（）;返回true; } function cleardragitem（）{dragitem = undefined; // alert（'item：'+ item）; } function dodrag（）{// alert（'item：'+ dragitem）; } //这是必需的---用于告诉WebKit拖动应该被允许。函数handlesragenter（elt，evt）{evt.preventDefault（）;返回true; }函数handlesragover（elt，evt）{evt.preventDefault（）;返回true; }函数handlesragleave（elt，evt）{}函数handlingrop（elt，evt）{// alert（'drop'）; dragitem.style.display =none; var newid = dragitem.id +'_dest'; var dest = document.getElementById（newid）; dest.innerHTML = dragitem.innerHTML; } // - > < /脚本> <风格> <！ - .wordbox {border：1px纯黑色; text-align：center;宽度：50px;向左飘浮; -webkit-user-drag：element; -webkit-user-select：none; } .spacer {clear：both; } .target {margin-top：30px;填充：30px;宽度：70px;边框：1px纯黑色;背景：＃c0c0ff; margin-bottom：30px; -webkit-user-drop：element; } .word {margin：30px; min-height：30px; border-bottom：1px纯黑色;宽度：50px;向左飘浮; } - > < /风格>< /头><身体GT; < p>将文字投放到目标区域以将其放置在他们的位置。< / p> < div class ='wordbox'id ='this'ondragstart ='setdragitem（this，event）;'ondrag ='dodrag（）;'ondragend ='cleardragitem（）;'>这个< / div> < div class ='wordbox'id ='is'ondragstart ='setdragitem（this，event）;'ondrag ='dodrag（）;'ondragend ='cleardragitem（）;'>是< / 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>< / html>
p> 这里是JSFiddle （记住，拖放是Webkit，所以只适用于Safari，这个网页仅适用于ipad）： https://jsfiddle.net/eyM3y/
首先，使用jquery UI http://jqueryui.com/demos/用于拖放功能
然后添加此脚本 https://github.com/furf/jquery-ui-touch-punch 在Ipad或Iphone中播放。
希望它有帮助。
p>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/
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.
这篇关于拖动&放在Safari iOS上：不会拖动，不会响应桌面/ iPad上的拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
