HTML5 拖放 - Firefox 被重定向答案

【问题标题】：HTML5 Drag and Drop - Firefox is being redirectedHTML5 拖放 - Firefox 被重定向
【发布时间】：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。

【问题讨论】：

标签： javascript html firefox drag-and-drop

【解决方案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;
}

【讨论】：

谢谢，你真的帮了我：D
preventDefault 完成了这项工作！但是有人可以解释一下为什么 drop 会在 Firefox 上触发重定向吗？？
@MatthieuRiegler 疯狂猜测：将文件放入 Firefox 会导航到该文件，这就是默认导航到要删除的 URL 的原因。就我而言，drag 之前曾调用过event.dataTransfer.setData('text/plain', "css")，FF 尝试打开 URL "css"。