Question

我正在尝试在我的应用中实现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。

Answer 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;
}

HTML5拖放 - 正在重定向Firefox

1 个答案: