请教firefox中层div的拖动问题

楼上正解。
IE下，可以用event.X或者event.clientX，效果一样。
FF下，只有event.clientX和event.pageX，前者和IE的一样，后者是鼠标在整个页面中的位置，即加了滚动条位置。

解决方案 »

  1.   

    改为 clientX/Y 在firefox下还是不行，下面是完整代码：<html>
    <body leftmargin=0 topmargin=0>
    <div id="skb1" style="position:absolute;background-color:Red;width:100px;height:30px"></div>
    <script type="text/javascript">
    var skb = document.getElementById("skb1");
    skb.onmousedown = skb_mousedown;
    skb.onmousemove = skb_mousemove;
    skb.onmouseup = skb_mouseup;var skbX,skbY;
    var skbmove=null;
    function skb_mousedown(){
        skbmove = skb;
        skbmove.setCapture();
        var evt = window.event;
    skbX = evt.clientX - skb.style.pixelLeft;
    skbY = evt.clientY - skb.style.pixelTop; }function skb_mousemove(evt){
        if(skbmove == null) return true;
        var evt = window.event;
        var x = evt.clientX - skbX;
    var y = evt.clientY - skbY;
        skb.style.left = x.toString() + "px"; 
        skb.style.top = y.toString() + "px";}function skb_mouseup(){
        if(skbmove != null) { 
            skbmove.releaseCapture();
            skbmove = null;}
    }
    </script>
    </body>
    </html>
      

  2.   

    var Browser = {
    MO:(typeof(document.implementation)!="undefined"&&typeof(document.implementation.createDocument)!="undefined"&&typeof(HTMLDocument)!="undefined")
    ,IE:window.ActiveXObject?true:false
    ,FF:(navigator.userAgent.toLowerCase().indexOf("firefox")>-1)
    ,OP:(navigator.userAgent.toLowerCase().indexOf("opera")>-1)
    ,Event:function(e){
    if(this.IE)return window.event;
    else if(this.FF) return e;
    }
    }
    Browser.Event.leftMouseDown=function(e){
    if(Browser.IE)return window.event.button==1;
    else if(Browser.FF)return e.button==0;
    }
    Browser.Event.mousePos=function(e){
    if(Browser.IE)return {x:window.event.x,y:window.event.y};
    else if(Browser.FF)return {x:e.clientX,y:e.clientY};
    }if(TE==null)var TE={};
    if(TE.UI==null)TE.UI={};
    TE.UI.drag = {
    dobj:null,
    pos:{x:0,y:0},
    start:function(obj,e){
    if(Browser.Event.leftMouseDown(e))
    {
    var mpos = Browser.Event.mousePos(e);
    this.pos.x = mpos.x + document.documentElement.scrollLeft - obj.style.left.toInt();
    this.pos.y = mpos.y + document.documentElement.scrollTop - obj.style.top.toInt();
    this.dobj=obj;
    $AE(document,"mousemove",TE.UI.drag.moving);
    $AE(document,"mouseup",TE.UI.drag.end);
    }
    },
    moving:function(e){
    var self = TE.UI.drag;
    if(self.dobj && Browser.Event.leftMouseDown(e))
    {
    var mpos = Browser.Event.mousePos(e);
    self.dobj.style.left = (mpos.x+document.documentElement.scrollLeft-self.pos.x)+"px";
    self.dobj.style.top = (mpos.y+document.documentElement.scrollTop-self.pos.y)+"px";
    }
    },
    end:function(){
    var self = TE.UI.drag;
    if(self.dobj && typeof self.dobj.ondragEnd=="function")self.dobj.ondragEnd();
    self.dobj = null; 
    $DE(document,"mousemove",TE.UI.drag.moving);
    $DE(document,"mouseup",TE.UI.drag.end);
    }
    }function $AE(o,_eventKey,_handler)
    {
    _eventKey = _eventKey.replace(/^on/i,"");
    if(Browser.IE)
    o.attachEvent(["on", _eventKey].join(''),_handler);
    else if(Browser.FF)
    o.addEventListener(_eventKey,_handler,false);
    }
    function $DE(o,_eventKey,_handler)
    {
    _eventKey = _eventKey.replace(/^on/i,"");
    if(Browser.IE)
    o.detachEvent(["on", _eventKey].join(''),_handler);
    else if(Browser.FF)
    o.removeEventListener(_eventKey,_handler,false);
    }调用方法触发的元素.onmousedown = function(e){TE.UI.drag.start(拖动的元素,e);}
      

  3.   

    事件添加不正确，这种写法是IE4的事件添加方法
    <script type="text/javascript">
    var skb=document.getElementById("skbdiv");
    skb.onmousedown = skb_mousedown;
    skb.onmousemove = skb_mousemove;
    skb.onmouseup = skb_mouseup;应该修改为：        //根据不同的浏览器支持情况添加事件
            if(document.addEventListener){//2级DOM
                skb.addEventListener("mousedown",skb_mousedown,true);
                skb.addEventListener("mousemove",skb_mousemove,true);
                skb.addEventListener("mouseup",skb_mouseup,true);
            }else if(document.attachEvent){//IE5+
                skb.attachEvent("onmousedown",skb_mousedown);
                skb.attachEvent("onmousemove",skb_mousemove);
                skb.attachEvent("onmouseup",skb_mouseup);
            }else{//IE4
                skb.onmousedown = skb_mousedown;
                skb.onmousemove = skb_mousemove;
                skb.onmouseup = skb_mouseup;
            }
      

  4.   

    我最近刚解决了这个问题，兼容IE和FF，以下是代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <html>
    <head>
    <title>鼠标拖动层</title>
    <script language=javascript>
    var obj="",pX="",pY="";
    function mdown(id,temp){
    obj=document.getElementById(id);
    ev=temp;
    pX=ev.clientX-obj.offsetLeft;
    pY=ev.clientY-obj.offsetTop;
    }
    function mmove(temp){
    ev=temp;
    if(obj){
     obj.style.cursor="move";
     obj.style.left=ev.clientX-pX+"px";
     obj.style.top=ev.clientY-pY+"px";
    }
    }function mup(){
    if(obj){
     obj.style.cursor="default";
     obj="",pX="",pY="";
    }
    }
    </script>
    <style>
    </style>
    </head>
    <body onmousemove="mmove(event)" onmouseup="mup()">
    <div id="MoveDiv" style="position:absolute;left:200px;top:50px;width:100px;height:300px;background:#00c">
     <div style="line-height:25px;text-align:center;background:#f00" onmousedown=mdown("MoveDiv",event)>
     按这里移动
     </div>
    </div>
    </body>
      

  5.   

    firefox 的事件 必须这样写
    onmousedown=mdown("MoveDiv",event)