Question

是否有任何理由说明即使属性draggable="true"，图像也无法在Firefox中拖动？我在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

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

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

Answer 2

在Firefox中，至少在v61中，似乎将draggable属性设置为false，而不是true会为您提供所需的结果-允许图像与鼠标的移动。

element.setAttribute('draggable', false);

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

似乎在初始移动发生并释放鼠标按钮后，Firefox默认将属性重置为true。必须将draggable属性重置回false，才能重新开始该过程。但是，考虑到您可能要处理该图像的所有鼠标事件，这应该不是问题，并且可以轻松地插入一行代码以确保在需要时拖动为false。

在Firefox中拖动元素的问题

2 个答案: