Javascript 在Firefox中拖动锚点内的元素

我在Firefox上遇到了一些HTML5拖放代码的问题，当可拖动元素位于锚定标记中时

归结到最低可复制代码，以下是我目前拥有的：

<a href="#">
  <div id="dragger" draggable="true"></div>
</a>

也在这里的一家

在Chrome中，一切都按预期运行（处理程序被执行），但在Firefox中，两个处理程序都不运行。相反，我得到的默认浏览器行为是拖动

标记

---

旁注：在我的应用程序中的某些地方，我可以通过将链接设置为可拖动元素来解决这个问题，并且在那里一切正常，但不幸的是，这不可能在任何地方都实现。

嘿，今天早上我处理了完全相同的问题：） 看起来像是Mozilla中的一个bug，因为它为dataTransfer分配了一个javascript中从未刻意分配过的值

我发现了以下解决方法：

    <a draggable="false" ondragstart="event.dataTransfer.setData('text', 'YourDataHere');" ondragover="event.preventDefault()">
        <div draggable="true" ondragstart="event.dataTransfer.setData('text', 'YourDataHere');" ondragover="event.preventDefault()">
      ...
        </div>
    </a>

...

---

因此，在锚定中设置dataTransfer可以提供您在Mozilla中的预期行为。为同一节点设置draggable=“false”可防止其他浏览器拖动锚点。使内部可拖动并在其中设置数据传输使其在我测试的所有浏览器（IE11，Chrome）中正常工作。

完全从a-tag中删除href属性有助于我支持onclick属性。您可以使用CSS“cursor:pointer；”修复由于缺少href而丢失的鼠标指针

在事件处理程序中调用event.preventDefault（）是避免默认行为所必需的

    <a draggable="false" ondragstart="event.dataTransfer.setData('text', 'YourDataHere');" ondragover="event.preventDefault()">
        <div draggable="true" ondragstart="event.dataTransfer.setData('text', 'YourDataHere');" ondragover="event.preventDefault()">
      ...
        </div>
    </a>