js弹出可拖动的DIV层，在IE和火狐下不兼容的问题

做了一个js弹出可拖动的并且屏蔽原来页面的DIV层。在IE下好用。在火狐下面拖动不了。并且连屏蔽的层都不出来
整个页面代码如下：<html>
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <div id="divTest" style="position: absolute; z-index: 3; width: 540; height: 170px;
            background-color: Yellow; display: none; top: 100px; left: 100px;">
            <div id="dd" style="background-color: Red; width: 365px; height: 20px; float: left;"
                onmousedown="down()">
            </div>
            <div style="background-color: Red; width: 35px; height: 20px;">
                <a onclick="closes()">关闭</a>
            </div>
        </div>
        <div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
            z-index: 2; left: 0px; display: none;">
        </div>
        <div id="main" style="background-color: Azure; height:700px;">
            <div>
                <a onclick="show()">弹出</a>
            </div>
            <div>
                <input type="button" id="t" onclick="javascript:alert('ads');" value="Value" />
            </div>
            <br />
        </div>
    </form>
   </body>
</html>JS代码： <script type="text/javascript">
    function show()
    {
        document.all.ly.style.display="block";   
        document.all.ly.style.width=document.body.clientWidth+20;
        document.all.ly.style.height=document.body.clientHeight+20;
        document.all.divTest.style.display='block';   
        document.getElementById("divTest").style.visibility="visible";
    }
    function closes()
    {
        if(window.confirm("关闭这个层"))
        {
            document.getElementById("divTest").style.visibility="hidden";
            document.all.ly.style.display='none'
        }
    }
    
    
    var px=0;
    var py=0;
    var begin=false;
    var topDiv;
    function down()
    {
        begin=true;
        document.getElementById("divTest").style.cursor= "hand";
        event.srcElement.setCapture();   
        px=document.getElementById("divTest").style.pixelLeft - event.x;
        py=document.getElementById("divTest").style.pixelTop - event.y;
    }
    function document.onmousemove()
    {
        if(begin)
        {
            document.getElementById("divTest").style.pixelLeft = px+event.x;
            document.getElementById("divTest").style.pixelTop = py+event.y;
        }
       
    }
    function document.onmouseup()
    {
        begin=false; 
        document.getElementById("divTest").style.cursor= "default";
        event.srcElement.releaseCapture();   
    }
    
    </script>
请高手们帮忙看看！多谢

解决方案 »

  1.   

    你怎么不直接用js框架做呢？那样可以避免浏览器兼容的问题
    我推荐jquery，因为这个里面就有很多你现在所需要的插件。
    找出来看看，会吓到的！
      

  2.   

    先提两点儿建议：
    1. 少使用document.all获取元素的DOM对象，尽量使用document.getElementById()
    2. 设置宽度的时候，要加单位
      

  3.   

    兼容问题好了，算法上你自己算吧
    <html>
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="divTest" style="position: absolute; z-index: 3; width: 540; height: 170px;
                background-color: Yellow; display: none; top: 100px; left: 100px;">
                <div id="dd" style="background-color: Red; width: 365px; height: 20px; float: left;"
                    onmousedown="down(event)" onmousemove="move(event)" onmouseup="up()">
                </div>
                <div style="background-color: Red; width: 35px; height: 20px;">
                    <a onclick="closes()">关闭</a>
                </div>
            </div>
            <div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
                z-index: 2; left: 0px; display: none;">
            </div>
            <div id="main" style="background-color: Azure; height:700px;">
                <div>
                    <a onclick="show()">弹出</a>
                </div>
                <div>
                    <input type="button" id="t" onclick="javascript:alert('ads');" value="Value" />
                </div>
                <br />
            </div>
        </form>
       </body>
    </html>
    <script type="text/javascript">
        function show()
        {
            document.all.ly.style.display="block";   
            document.all.ly.style.width=document.body.clientWidth+20;
            document.all.ly.style.height=document.body.clientHeight+20;
            document.all.divTest.style.display='block';   
            document.getElementById("divTest").style.visibility="visible";
        }
    //    function closes()
    //    {
    //        if(window.confirm("关闭这个层"))
    //        {
    //            document.getElementById("divTest").style.visibility="hidden";
    //            document.all.ly.style.display='none'
    //        }
    //    }
        
        
        var px=0;
        var py=0;
        var begin=false;
        var topDiv;
        function down(e)
        {
    var event = e || window.event;
    var x = event.x || event.pageX;
    var y = event.y || event.pageY;
    begin=true;
    document.getElementById("divTest").style.cursor= "hand";

    if (!window.captureEvents) {    
    o.setCapture();    
    }else {    
    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);    
    }    
    if (!window.captureEvents) {    
    o.releaseCapture();    
    }else {    
    window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);    
    }  px=document.getElementById("divTest").style.pixelLeft - x;
    py=document.getElementById("divTest").style.pixelTop - y;
        }
        function move(e)
        {
            if(begin)
            {
    var event = e || window.event;
    var x = event.x || event.pageX;
    var y = event.y || event.pageY;
    //            document.getElementById("divTest").style.pixelLeft = x + "px";
    //            document.getElementById("divTest").style.pixelTop = y + "px";
    document.getElementById("divTest").style.top = x + "px";
    document.getElementById("divTest").style.left = y + "px";
            }
           
        }
        function up()
        {
            begin=false; 
            document.getElementById("divTest").style.cursor= "default";
            event.srcElement.releaseCapture();   
        }
        
        </script>
      

  4.   

    火狐不支持document.all ，还有display不能用block，要用display，楼主把这两个替换 一下再试应该就好了
      

  5.   

    你可以无视IE 直接在FF下写拖动的脚本
    之后再观察2个浏览器实现JS的不同之处 在封装底层不同实现的细节起来 变成通用的拖动脚本
    一回生 二回熟