在Firefox中拖动元素的问题

Posted 2021-04-20

是否有任何理由为什么即使属性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中可能不会触发拖动事件，但这似乎不是问题。

答案

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

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

另一答案

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

element.setAttribute('draggable', false);

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

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