在Firefox中拖动元素时出现问题

Question

有没有什么原因导致图片在火狐中不能拖动，即使当属性为draggable="true"的时候？我正在用JS设计一个图像交换脚本，但在Firefox中运行它时遇到了一些问题。虽然代码在Chrome、Edge和IE中运行良好，但当我尝试在Firefox中拖放图像时，浏览器似乎不允许我拖动图像(没有重影图像出现)，因此我的拖动事件不会触发或触发任何拖放事件。我正在通过document.createElement('img')生成图像，并使用

imgElement.setAttribute('draggable', true);
imgElement.setAttribute('ondragstart', 'drag(event)');

我的拖动函数：

function drag(ev) {
 if (!ev.target.classList.contains(clickClass)) {
  return;
 }

 ev.dataTransfer.setData("text", ev.target.id);
 document.getElementById(ev.target.id).parentElement.setAttribute('class', 'noclick');
};

我读到了一个不同的问题，如果数据没有被传输，拖动事件可能不会在Firefox中触发，然而，这似乎不是问题所在。

Answer 1

您应该添加dragstart侦听器，而不是imgElement.setAttribute('ondragstart', 'drag(event)');：

imgElement.addEventListener('dragstart', function(e){
    drag(e);
});

Answer 2

似乎在火狐中，至少在v61中，将draggable属性设置为false，而不是true，会给你带来想要的结果--允许图像随着鼠标的移动而拖动。

element.setAttribute('draggable', false);

可能Firefox假设它会处理图像的拖动，除非您明确地将一个属性设置为false，在这种情况下，您可以使用自己的js处理程序来移动图像。

而且，一旦发生初始移动并释放鼠标按钮，火狐似乎就会默认地将该属性重置为true。必须将draggable属性重置回false，才能重新启动该过程。但是，这应该不是问题，因为您可能正在处理该图像的所有鼠标事件，并且可以很容易地插入一行代码，以确保在需要时拖动是false。