对象拖动延迟问题

时间:2010-05-23 23:03:19

标签: javascript dom drag-and-drop

我有这个代码在IE中完美地拖拽 - 但是在firefox中,对象的onmousedown-drag不会立即拖动但是显示无条目游标,然后在onmouseup之后对象自由拖动。该对象确实停止在下一个onmouseup上拖延。该对象应该只在onmousdown状态下拖动,而onmousup调用应该通过使j_OK = 0来取消拖动。我认为它可能与里面的图像有关...

对象:

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

1 个答案:

答案 0 :(得分:0)

你不能只是轻率地使用clientX和clientY。这些属性在IE和其他浏览器中的工作方式不同作为quirksMode says,,还有更多工作要做到正确的位置。这是他的解决方案:

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
}