HTML5 拖放 - Firefox 被重定向
Posted
技术标签:
【中文标题】HTML5 拖放 - Firefox 被重定向【英文标题】：HTML5 Drag and Drop - Firefox is being redirected 【发布时间】：2013-01-10 14:17:40 【问题描述】：我正在尝试在我的应用中实现 html5 的拖放功能，但 Firefox 总是被重定向到拖放图像的源。我正在使用e.stopPropagation()。在 Chromium 中，一切都按预期工作。奇怪的...
代码如下：
<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。
【问题讨论】：
【参考方案1】：你需要prevent the default action:
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;
【讨论】：
谢谢，你真的帮了我：DpreventDefault 完成了这项工作！但是有人可以解释一下为什么 drop 会在 Firefox 上触发重定向吗？？
@MatthieuRiegler 疯狂猜测：将文件放入 Firefox 会导航到该文件，这就是默认导航到要删除的 URL 的原因。就我而言，drag 之前曾调用过event.dataTransfer.setData('text/plain', "css")，FF 尝试打开 URL "css"。以上是关于HTML5 拖放 - Firefox 被重定向的主要内容，如果未能解决你的问题，请参考以下文章
Firefox 中的 HTML5 拖放文件夹检测。甚至可能吗？