HTML5拖放 - Firefox正在被重定向 [英] HTML5 Drag and Drop - Firefox is being redirected
本文介绍了HTML5拖放 - Firefox正在被重定向的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
e.stopPropagation（）。在Chromium中，一切都按预期工作。奇怪的... 这是代码：
< html>
< head>
< meta charset =utf-8/>
< title> DuOS 0.0.0< / title>
< meta name =authorcontent =Jan Durrer，MichalGrňo/>
< link rel =stylesheethref =./ default.css/>
< / head>
< body>
< script src =./ boot.js>< / script>
< script src =./ window.js>< / script>
< script src =./ omnibox.js>< / script>
< section class =desktop>
< img class =iconid =computerstyle =left：0px; top：340px; src =./ image / icon / system / computer.png/>
< img class =iconid =folderstyle =left：0px; top：170px; src =./ image / icon / system / documents.png/>
< img class =iconid =binstyle =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í
函数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;
}
函数drag_over（e）{
e.preventDefault（）;
返回false;
}
函数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，空值）;
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。
解决方案
您需要防止默认操作<一个>：
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;
返回false;
}
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>
Thanks for your help, m93a.
解决方案
You need to 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;
}
这篇关于HTML5拖放 - Firefox正在被重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
