问题描述
我正在编写要在 iPad 上查看的网页.它使用 Safaris/Webkits 拖动 &降低.我已经完全复制了 Safari 的示例 drag &删除代码，但它不起作用.
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.
我的问题:当我在 Safari 桌面或 iPad 上的 Safari 上运行网页(HTML、CSS 和 Javascript)时，永远不会触发 ondrop 事件.在 ipad 上，我什至无法拖动元素(显微镜出现并且当我按住并将手指移动到元素上时它不会拖动).不过，拖动确实可以在桌面上工作.
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.
怎么了?
小代码示例可以在此页面的最底部找到:https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html
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>这里是 JSFiddle(请记住拖放是 Webkit，因此仅适用于 Safari-此网页仅适用于 ipad):https://jsfiddle.net/eyM3y/
Here is the JSFiddle (remember the drag & drop is Webkit so only for Safari-this webpage is for ipad only): https://jsfiddle.net/eyM3y/
推荐答案
可行的替代方案:
首先，使用 jquery UI http://jqueryui.com/demos/ 实现拖放功能
Firstly, use jquery UI http://jqueryui.com/demos/ for drag and drop functionality
然后添加这个脚本https://github.com/furf/jquery-ui-touch-punch 用于在 Ipad 或 Iphone 中播放.
and then add this script https://github.com/furf/jquery-ui-touch-punch for playing it in Ipad or Iphone.
希望对你有帮助.
这篇关于拖动&在 Safari iOS 上拖放:不会拖动，不会响应桌面/iPad 上的拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！