HTML5 Drag and Drop - Firefox wird umgeleitet

Question

Jan 26, 2013, 10:30 PM

HTML5 Drag and Drop - Firefox wird umgeleitet

Ich versuche, das Ziehen und Ablegen von HTML5 in meine App zu implementieren, aber Firefox wird immer zum Ablegen der Bildquelle umgeleitet. Ich benutzee.stopPropagation(). In Chromium funktioniert alles wie erwartet. Seltsam ... Hier ist der 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>

Vielen Dank für Ihre Hilfe, m93a.