为什么使用 JavaScript 拖动图像在 Firefox 中不起作用？答案

【问题标题】：Why doesn't dragging images using JavaScript work in Firefox?为什么使用 JavaScript 拖动图像在 Firefox 中不起作用？
【发布时间】：2012-06-14 13:01:14
【问题描述】：

我正在使用下面的代码来拖动图像 (#StndSoln1)。它在 Chrome 和所有版本中都能完美运行，但在 Firefox 中却不行。这里 startDrag() 是我附加到 mousedown 事件侦听器的函数。谁能帮帮我。

function initialFunction(){


document.getElementById("StndSoln1").addEventListener('mousedown',startDrag,false);
document.getElementById("StndSoln1").addEventListener('mousemove',drag,false);
document.getElementById("StndSoln1").addEventListener('mouseup',stopDrag,false);


}


function startDrag()

{

if (!moveFlag){


currentTraget=document.getElementById("StndSoln1");

offsetX=currentTraget.offsetLeft;
offsetY=currentTraget.offsetTop;
ImgPlaced=false;    
moveFlag=true;

x=window.event.clientX;
y=window.event.clientY; 

event.preventDefault();
}
}

   // Fn for drag the current target object...
  function drag(){

if (moveFlag && !ImgPlaced){    
    currentTraget.style.left=(offsetX+window.event.clientX-x)+"px";
    currentTraget.style.top=(offsetY+window.event.clientY-y)+"px";
}
}

【问题讨论】：

好吧，这段代码除了设置一些变量之外并没有做太多的事情......所以我知道它是如何在 chrome 中拖动图像的。
当您有诸如 Traget 而不是 Target 之类的拼写错误时，我开始怀疑即使有人向您解释了您是否能够使其正常工作。
就像对未来的一个说明，这就是我们其他人使用像 jQuery 这样的库的原因

标签： javascript firefox drag-and-drop mouseevent dom-events

【解决方案1】：

我实际上遇到了类似的问题，所以即使没有您使用的代码，我也可以尝试提供帮助。

请看，Firefox 开发人员有一个绝妙的想法，这样当您拖动图像时，您可以“移动”它并可能将其放到资源管理器窗口中以快速轻松地下载它，或者放到标签中栏以在新选项卡中打开图像。这样做的明显缺点是它会导致其他浏览器没有的默认行为。

简单的解决方案是确保您的所有事件都正确取消了默认操作（event.preventDefault、return false，诸如此类）。如果这也失败了，那么您应该使用带有background-image 的<div> 元素而不是<img> 元素。

【讨论】：