这段js代码在火狐下无法生效，请高手指点！


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<head>
<style>
body{
margin:0px;
padding:0px;
}
#drag {
position:absolute;
cursor:pointer;
}
</style>
<script language="JavaScript">
function drags(){
var z= event.srcElement || event.target;
temp1=z.style.pixelLeft 
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=function(){
if (event.button==1){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
var newclientwidth = parseInt(document.documentElement.clientWidth)-parseInt(z.style.width); 
var newclientheight = parseInt(document.documentElement.clientHeight)-parseInt(z.style.height); 
if(z.style.pixelTop>newclientheight){
z.style.pixelTop = newclientheight
}else if(z.style.pixelTop<=0){
z.style.pixelTop = 0
}
if(z.style.pixelLeft>newclientwidth ){
z.style.pixelLeft = newclientwidth
}else  if(z.style.pixelLeft<=0){
z.style.pixelLeft = 0 
}

}
}
}
</script>
</head>
<body>
<div id="drag" style="width:158px; height:150px; background:#0066CC;" onmousedown="drags()" ></div>
</body>
</html>

解决方案 »

  1.   

    event只在ie里有效
    你可以参考网上的兼容性教程
      

  2.   

    http://www.cnblogs.com/cloudgamer/archive/2008/11/17/Drag.html
      

  3.   

    火狐下的event是通过函数第一个参数传进去的，你可以写成function(e){var event=e||window.event;}
    这样就兼容了。
      

  4.   


    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>www.jb51.net 拖动层效果代码</title> 
    <script> 
     var obj=0; 
     var x=0; 
     var y=0; 
     var ie = (navigator.appVersion.indexOf("MSIE")!=-1);//IE 
     var ff = (navigator.userAgent.indexOf("Firefox")!=-1);//Firefox 
     function find(evt,objDiv){ 
      obj = objDiv 
      if (ff){ 
        x = document.documentElement.scrollLeft + evt.layerX; 
        y = document.documentElement.scrollTop + evt.layerY; 
         
        if (document.documentElement.scrollTop > 0){ 
         y = evt.layerY - document.documentElement.scrollTop; 
        } 
         
        if (document.documentElement.scrollLeft > 0){ 
         x = evt.layerX - document.documentElement.scrollLeft; 
        } 
       } 
      if (ie){ 
        x = document.documentElement.scrollLeft + evt.offsetX; 
        y = document.documentElement.scrollTop + evt.offsetY; 
         
        if (document.documentElement.scrollTop > 0){ 
         y = evt.offsetY - document.documentElement.scrollTop; 
        } 
         
        if (document.documentElement.scrollLeft > 0){ 
         x = evt.offsetX - document.documentElement.scrollLeft; 
        } 
       } 
     } 
     function dragit(evt){ 
      if(obj == 0){ 
       return false 
      } 
      else{ 
       obj.style.left = evt.clientX - x + "px"; 
       obj.style.top = evt.clientY - y + "px"; 
      } 
     } 
    </script> 
    </head> 
    <body style="margin:0" onmousemove="dragit(event)" onmouseup="obj = 0"> <div id="aaa" style="background-color:red;width:200pt;height:200pt;position:absolute"> 
    <div id="aa" style="width:200pt;height:20pt;background:blue;position:absolute" onmousedown="find(event,document.getElementById('aaa'))"></div> 
    </div>
    </body> 
    </html> 
    这样，楼主你仿照着把你的改改，我没有改成你的代码
      

  5.   

    onmousedown="drags(event)" .
    js中： function drags(event) {
    if (startTag) {
    var currentX = event.x ? event.x : event.pageX;
    var currentY = event.y ? event.y : event.pageY;
                     ....................
             }
      

  6.   

    var mX;
    var mY;
    var tX;
    var tY;
    var startTag = false;
    var initialposX;
    var initialposY;
    var target;
    var lastnode = null;
    var initialwidth = 405;
    var a = new Object();
    function posMouse(event) {
    if (startTag) {
    // var target = document.getElementById('target'); var currentX = event.x ? event.x : event.pageX;
    var currentY = event.y ? event.y : event.pageY;
    var container = document.getElementById('container');
    // alert(container.offsetLeft);
    // alert(container.offsetTop);
    if (currentX) {
    if ((initialposX + (currentX - mX)) < container.offsetLeft) {
    target.style.left = container.offsetLeft;
    } else if ((initialposX + (currentX - mX)) > container.offsetLeft
    + container.clientWidth - target.clientWidth) {
    target.style.left = container.offsetLeft
    + container.clientWidth - target.clientWidth; } else {
    target.style.left = initialposX + (currentX - mX) + 'px';
    }
    if (target.offsetLeft <= 0) {
    target.style.left = '0px';
    }
    }
    // alert((initialposX + (currentX - mX)) > container.offsetTop
    // + container.clientHeight - target.clientHeight);
    if (currentY) {
    if ((initialposY + (currentY - mY)) < container.offsetTop) {
    target.style.top = container.offsetTop;
    } else if ((initialposY + (currentY - mY)) > container.offsetTop
    + container.clientHeight - target.clientHeight) {
    //alert('ok');
    target.style.top = container.offsetTop + container.clientHeight
    - target.clientHeight;
    } else {
    target.style.top = initialposY + (currentY - mY) + 'px';
    }
    if (target.offsetTop <= 0) {
    target.style.top = '0px';
    }
    }
    // target.style.left ='200px'; }
    }
    function start(event) {
    if (lastnode == null) {
    } else {
    lastnode.style.zIndex = 0;
    }
    startTag = true;
    var obj = event.srcElement ? event.srcElement : event.target;
    obj.style.cursor = 'move';
    target = obj.parentNode;
    target.style.zIndex = 2;
    // target = document.getElementById('target');
    mX = event.x ? event.x : event.pageX;
    mY = event.y ? event.y : event.pageY;
    initialposX = target.offsetLeft;
    initialposY = target.offsetTop;
    // alert(tX);
    // alert(tY);
    }
    function stop(event) { var obj2 = event.srcElement ? event.srcElement : event.target;
    obj2.style.cursor = 'default';
    lastnode = target;
    startTag = false;
    }
    function changepic(event) {
    var obj2 = event.srcElement ? event.srcElement : event.target; if (obj2.src.match('hover.png') == null) {
    obj2.src = obj2.src.replace('.png', 'hover.png');
    } else {
    obj2.src = obj2.src.replace('hover.png', '.png');
    }}function emptyscreen(event) {
    // document.getElementsByTagName(tagname)
    var minpic = event.srcElement ? event.srcElement : event.target;
    var Pminnode = minpic.parentNode.parentNode;
    Pminnode.style.height = minpic.clientHeight + 'px';
    Pminnode.style.width = 200 + 'px';
    Pminnode.style.left = 0 + 'px';
    Pminnode.style.top = 0 + 'px';
    Pminnode.style.zIndex = 1;
    Pminnode.getElementsByTagName('div')[0].style.width = 107 + 'px';
    }
    function fullscreen(event) {
    var maxpic = event.srcElement ? event.srcElement : event.target;
    var Pwidth = maxpic.parentNode.parentNode.style.width;
    if (Number(Pwidth.substring(0, Pwidth.length - 2)) <= initialwidth) { var windowHeight = window.screen.availHeight;// window.screen.availHeight
    var widnowwidth = window.screen.availWidth;// window.screen.availWidth
    var Pnode = maxpic.parentNode.parentNode;
    Pnode.style.height = Number(windowHeight - 150) + 'px';
    Pnode.style.width = Number(widnowwidth - 25) + 'px';
    Pnode.style.left = 0 + 'px';
    Pnode.style.top = 0 + 'px';
    Pnode.style.zIndex = 3;
    Pnode.getElementsByTagName('div')[0].style.width = Number(widnowwidth - 25 - 93) + 'px';
    } else { maxpic.parentNode.parentNode.style.height = 400 + 'px';
    maxpic.parentNode.parentNode.style.width = 405 + 'px';
    maxpic.parentNode.parentNode.style.left = 100 + 'px';
    maxpic.parentNode.parentNode.style.top = 100 + 'px';
    maxpic.parentNode.parentNode.style.zIndex = 2;
    maxpic.parentNode.parentNode.getElementsByTagName('div')[0].style.width = '77%';
    }
    }function block(oEvent) {
    if (window.event) {
    oEvent = window.event;
    oEvent.returnValue = false;
    } else {
    oEvent.preventDefault();
    }
    }
    document.oncontextmenu = block;
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>div manipulation</title>
    <script src="code4.js" type="text/javascript"></script>
    <style type="text/css">
    .target {
    position: absolute;
    left:100px;
    top:100px;
    background-color:pink;
    width: 405px;
    height: 400px;
    border:solid 2px ;
    }
    div img{
    float:right;
    }
    .move1 {
    height:17px;
    background: green;
    float: left;
    width: 77%;

    }
    .move2 {
    height:17px;
    background: yellow;
    float: left;
    width: 77%;}
    </style></head>
    <body >
    <div id="container"   style=" margin-left:100px;margin-top:px; width:1000px;height:800px;background-color: red;" onmouseup="stop(event);" onmousemove="posMouse(event)" >
    <div  class="target" style="">
    <div class="move1" onmouseup="stop(event);"  onmousedown="start(event)"></div><div>
    <img alt="" src="img/closed.png"  onclick="" onmouseout="changepic(event)" onmouseover="changepic(event)"  >
    <img alt="" src="img/maximized.png" onclick="fullscreen(event);" onmouseout="changepic(event)" onmouseover="changepic(event)">
    <img alt="" src="img/minimized.png" onclick="emptyscreen(event);" onmouseout="changepic(event)" onmouseover="changepic(event)">
    </div>
    </div>
    </div>
    </body>
    </html>