本文介紹了HTML5 拖放 - Firefox 被重定向的處理方法，對大家解決問題具有一定的參考價值，需要的朋友們下面隨著小編來一起學習吧！
問題描述
限時送ChatGPT賬號..
我正在嘗試在我的應用程序中實現 html5 的拖放功能，但 Firefox 總是被重定向到拖放圖像的源.我正在使用 e.stopPropagation().在 Chromium 中，一切都按預期工作.奇怪的...代碼如下:
I'm trying to implement html5's drag and drop in my app but Firefox is always redirected to dropped image's source. I'm using e.stopPropagation(). In Chromium everything works as expected. Strange...
Here's the code:
<html>
<head>
<meta charset="utf-8" />
<title>DuOS 0.0.0</title>
<meta name="author" content="Jan Durrer, Michal Grňo" />
<link rel="stylesheet" href="./default.css" />
</head>
<body>
<script src="./boot.js"></script>
<script src="./window.js"></script>
<script src="./omnibox.js"></script>
<section class="desktop">
<img class="icon" id="computer" style="left: 0px; top: 340px;" src="./image/icon/system/computer.png" />
<img class="icon" id="folder" style="left: 0px; top: 170px;" src="./image/icon/system/documents.png" />
<img class="icon" id="bin" style="left: 0px; top: 0px;" src="./image/icon/system/bin.png" />
</section>
<script>
window.clickedIcons = Array();
window.draggedIcon = {};
window.draggedIcon.offset = Array();
window.draggedIcon.element = null;
//Pohybování
function drag_start(e) {
window.draggedIcon.element = e.target;
event.dataTransfer.effectAllowed = 'copyMove';
event.dataTransfer.setData('text/plain', 'hola'); //hack
var style = window.getComputedStyle(event.target, null);
window.draggedIcon.offset[0] = parseInt(style.getPropertyValue("left"),10) - event.clientX; console.log(window.draggedIcon.offset[0]);
window.draggedIcon.offset[1] = parseInt(style.getPropertyValue("top" ),10) - event.clientY; console.log(window.draggedIcon.offset[1]);
window.draggedIcon.element = event.target;
}
function drag_over(e) {
e.preventDefault();
return false;
}
function drop(e) {
window.draggedIcon.element.style.left = (event.clientX + window.draggedIcon.offset[0]) + 'px';
window.draggedIcon.element.style.top = (event.clientY + window.draggedIcon.offset[1]) + 'px';
window.draggedIcon.element.style.visibility = 'visible';
window.draggedIcon.element = null;
if(e.stopPropagation) {e.stopPropagation();}
return false;
}
var xresult = document.evaluate('//body/*[@class="desktop"]/*[@class="icon"]', document, null, XPathResult.ANY_TYPE, null);
var dm = xresult.iterateNext();
while (dm) {
dm.addEventListener('dragstart',drag_start,false);
dm.addEventListener('click',click,false);
dm = xresult.iterateNext();
}
document.body.addEventListener('dragover',drag_over,true);
document.body.addEventListener('drop',drop,true);
</script>
</body>
</html>
感謝您的幫助，m93a.
Thanks for your help, m93a.
推薦答案
你需要阻止默認操作:
function drop(e) {
if(e.preventDefault) { e.preventDefault(); }
if(e.stopPropagation) { e.stopPropagation(); }
window.draggedIcon.element.style.left = (event.clientX + window.draggedIcon.offset[0]) + 'px';
window.draggedIcon.element.style.top = (event.clientY + window.draggedIcon.offset[1]) + 'px';
window.draggedIcon.element.style.visibility = 'visible';
window.draggedIcon.element = null;
return false;
}
這篇關于HTML5 拖放 - Firefox 被重定向的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！
【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！