在 Firefox 中拖动元素的问题答案

【问题标题】：Issues dragging elements in Firefox在 Firefox 中拖动元素的问题
【发布时间】：2016-12-31 01:54:12
【问题描述】：

是否有任何原因导致即使属性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 中触发，但是，这似乎不是这里的问题。

【问题讨论】：

请提供一个工作示例（不仅仅是部分代码）。这将是获得帮助的最佳方式。您可以为此使用jsfiddle.net，或创建一个snippet
我创建了一个 jsfiddle，它似乎在 jsfiddle 中工作，但在网站上却没有。如果我删除这个帖子可以吗，因为看起来问题可能与 JS 无关？

标签： javascript jquery html firefox drag-and-drop

【解决方案1】：

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

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

【讨论】：

我创建了一个 jsfiddle，它似乎可以在 jsfiddle 中工作，但不能在网站上工作。如果我删除这个帖子可以吗，因为看起来问题可能与 JS 无关？
如果您删除此帖子，我将不会从中获得选票。有什么理由删除它吗？我认为答案是正确的......
我可以保留它，只是问题似乎并非源于 Javascript 本身。也就是说，当我将旧代码插入 jsfiddle 时，它得到了预期的结果。

【解决方案2】：

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

element.setAttribute('draggable', false);

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

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

【讨论】：