HTML5 拖放 - Firefox 被重定向

2022-01-11 00:00:00 drag-and-drop firefox javascript html

我正在尝试在我的应用程序中实现 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;
}

相关文章