请问firefox中层div的拖动有关问题-JavaSript-爱易网页

请问firefox中层div的拖动有关问题

日期：2014-05-16　浏览次数：20520 次

请教firefox中层div的拖动问题
div.htm代码如下：

HTML code


<html>
<head>
<title>层的拖动</title>
</head>
<body>
<div id="skbdiv" style="background-color:red;position:absolute;width:70px;height:50px">层的拖动</div>
<script type="text/javascript">
var skb=document.getElementById("skbdiv");
skb.onmousedown = skb_mousedown;
skb.onmousemove = skb_mousemove;
skb.onmouseup = skb_mouseup;

var skbX,skbY;
var skbmove=null;
function skb_mousedown(evt){
    skbmove = skb;
    skbmove.setCapture();
    evt = evt || window.event;
    skbX = evt.x - skb.style.pixelLeft;
    skbY = evt.y - skb.style.pixelTop; }

function skb_mousemove(evt){
    if(skbmove == null) return true;
    evt = evt || window.event;
    var x = evt.x - skbX;
    var y = evt.y - 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>

在ie中没问题，但在firefox中无效，请问哪些地方需要修改？

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

JScript code

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)

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

请问firefox中层div的拖动有关问题

相关资料更多>

推荐阅读更多>