HTML5 拖放 - Firefox 被重定向-前端问题

HTML5 Drag and Drop - Firefox is being redirected(HTML5 拖放 - Firefox 被重定向)

本文介绍了HTML5 拖放 - Firefox 被重定向的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在我的应用程序中实现 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="Li9ib290Lmpz"></script>
  <script src="Li93aW5kb3cuanM="></script>
  <script src="Li9vbW5pYm94Lmpz"></script>
  <section class="desktop">
   <img class="icon" id="computer" style="left: 0px; top: 340px;" src="Li9pbWFnZS9pY29uL3N5c3RlbS9jb21wdXRlci5wbmc=" />
   <img class="icon" id="folder" style="left: 0px; top: 170px;" src="Li9pbWFnZS9pY29uL3N5c3RlbS9kb2N1bWVudHMucG5n" />
   <img class="icon" id="bin" style="left: 0px; top: 0px;" src="Li9pbWFnZS9pY29uL3N5c3RlbS9iaW4ucG5n" />
  </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.

问题描述

推荐答案