Object drag delay issue

Question

I have this code that drags stuff around perfectly in IE - however in firefox the onmousedown-drag of the object does not immediately drag but shows the no-entry cursor and then after onmouseup the object drags around freely. The object does stop draging on the next onmouseup. The object should only drag in the onmousdown state, while the onmousup call should cancel the drag by making j_OK=0. I think it may have something to do with the image inside...

the object:

    <em style=position:absolute;left:0;top:0;width:32;height:32;display:block>
< img src=abc.gif onmousedown=P_MV(this.parentNode) style=position:absolute;left:0;top:0;width:inherit>
</em>



    function P_MV(t)
{
 p_E=t
 j_oy=parseInt(p_E.style.top)
 j_ox=parseInt(p_E.style.left)
 j_OK=1
 document.onselectstart=function(){return false}
 document.onmousemove=P_MVy
}

function P_MVy(e)
{
 if(j_OK)
 {
  p_E.style.top=(j_FF?e.clientY:event.clientY)-j_y+j_oy
  p_E.style.left=(j_FF?e.clientX:event.clientX)-j_x+j_ox
 }
 return false
} 

Answer 1

You can't just blithely use clientX and clientY. Those properties work differently among IE and other browsers. As quirksMode says, there is more to do just to get the correct location. Here's his solution:

function doSomething(e) {
    var posx = 0;
    var posy = 0;
    if (!e) var e = window.event;
    if (e.pageX || e.pageY)     {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY)    {
        posx = e.clientX + document.body.scrollLeft
            + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop
            + document.documentElement.scrollTop;
    }
    // posx and posy contain the mouse position relative to the document
    // Do something with this information
}