HTML5 拖放 - Firefox 被重定向

Question

我正在尝试在我的应用程序中实现 HTML5 的拖放，但 Firefox 总是被重定向到拖放图像的源。 我正在使用e.stopPropagation() 。 在 Chromium 中，一切都按预期工作。 这是代码：

<section class="desktop">
  <img class="icon" style="left: 0px; top: 340px;" src="./computer.png" />
  <img class="icon" style="left: 0px; top: 170px;" src="./documents.png" />
  <img class="icon" style="left: 0px; top: 0px;" src="./bin.png" />
</section>
<script>
  window.clickedIcons = [];
  window.draggedIcon = {
    offset: [0, 0],
    element: null
  };

  //Drag & drop
  function dragStart(e) {
    window.draggedIcon.element = e.target;
    event.dataTransfer.effectAllowed = 'copyMove';
    event.dataTransfer.setData('text/plain', 'hey'); //hack

    const style = getComputedStyle(event.target);
    draggedIcon.element = event.target;
    draggedIcon.offset[0] =
        parseInt(style.getPropertyValue("left")) - event.clientX;
    draggedIcon.offset[1] =
        parseInt(style.getPropertyValue("top" )) - event.clientY;
  }

  function dragOver(e) {
    e.preventDefault();
    return false;
  }
       
  function drop(e) {
    draggedIcon.element.style.left =
        (event.clientX + window.draggedIcon.offset[0]) + 'px';
    draggedIcon.element.style.top =
        (event.clientY + window.draggedIcon.offset[1]) + 'px';
    draggedIcon.element.style.visibility = 'visible';
    draggedIcon.element = null;

    if (e.stopPropagation) { e.stopPropagation(); }
    return false;
  }

  const icons = document.querySelectorAll('.desktop .icon');
  for (const i of icons) {
    i.addEventListener('dragstart', dragStart, false);
    i.addEventListener('click', click, false);
  }

  document.body.addEventListener('dragover', dragOver, true);
  document.body.addEventListener('drop', drop, true);
</script>

谢谢！

Answer 1

您需要阻止默认操作：

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