問題描述
我正在編寫要在 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 上的拖放的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！