Why doesn't dragging images using JavaScript work in Firefox?

Question

I'm using the code below for dragging an image ( #StndSoln1 ). It works perfectly in Chrome and all, but not in Firefox. Here startDrag() is the function which i attached to the mousedown event listener. Could anybody please help me.

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";
}
}

Answer 1

I actually had a similar problem, so I can try to help even without the code you're using.

See, the Firefox developers had this bright idea of making it so that, when you drag an image, you can "move" it around and possibly drop it in an Explorer window to quickly and easily download it, or to the tab bar to open the image in a new tab. The obvious downside of this is that it results in a default behaviour that other browsers don't have.

The simple solution is to make sure that all your events are properly cancelling the default action ( event.preventDefault , return false , that kind of thing). Should that fail too, then you should use a <div> element with a background-image instead of an <img> element.