Question

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

归结为最小可重现代码，这是我目前所拥有的：

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

以下Javascript：

var d = document.getElementById('dragger');

d.ondragstart = (e) => {
  console.log('dragstart');
  e.dataTransfer.setData('text', '');
  d.style.backgroundColor = 'green';
};

d.ondragend = (e) => {
  console.log('dragend');
  d.style.backgroundColor = '';
};

此处还有JSBin。

在Chrome中，一切都按预期工作（处理程序已执行），但在Firefox中，两个处理程序都没有运行。相反，我得到了拖动<a>标记的默认浏览器行为。

旁注：在我的应用程序的某些地方，我已经能够通过使链接成为可拖动元素来解决这个问题，并且一切正常，但不幸的是，这在任何地方都不可能。

Answer 1

嘿，我今天早上已经完成了同样的问题:) 看起来像Mozilla中的一个错误，因为它为从未在javascript中故意分配的dataTransfer赋值。

以下我找到了解决方法：

    <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”可防止其他浏览器拖动锚点。使内部可拖动和设置dataTransfer使它在我测试的所有浏览器（IE11，Chrome）中正常工作。

Answer 2

在我的案例中，完全删除a标签中的href属性有助于onclick-Attribute。您可以通过CSS“ cursor：pointer;”来解决由于缺少href而导致的鼠标指针丢失。

为了避免默认行为，必须在事件处理程序中调用event.preventDefault（）。

在Firefox中拖动锚点内的元素

2 个答案: