急 在线等待，js问题 高手请进！

下面这段js为什么加了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这个协议在火狐下运行不了去掉了那句话，在IE下是好的，但在火狐下不能拖动！ 本人是刚接触js，求高手指教，最好帮忙修改一下，加一点注释！另外追加分，小弟在这拜谢了！
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MyHtml.html</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style>
/**
* 弹出层css
*/
.pop {
width: 80%;
border: 1px #96D1DF solid;
background: #fff;
padding: 1px;
color: #333;
position: absolute;
top: 15%;
left: 15%;
height: auto;
z-index: 10
}

/**
* 弹出层css
*/
.pop_ {
width: 80%;
border: 1px #96D1DF solid;
background: #fff;
padding: 1px;
color: #333;
position: absolute;
top: 15%;
left: 15%;
height: auto;
z-index: 10
}

.pop_title {
float: left;
width: 100%;
height: 30px;
line-height: 30px;
/* background: #ecf9ff url ('../images/title_move.gif') center no-repeat; */
background: #ecf9ff;
border-bottom: 1px #d3ecf3 solid;
color: #444;
font-weight: bold
}

.pop_title_left {
float: left;
width: 90%;
overflow: hidden;
text-indent: 6px;
cursor: move
}

.pop_title_left img {
float: left;
border: 0;
margin: 10px 0 0 5px
}

.pop_title_right {
width: 5%;
float: right;
text-align: right;
cursor: pointer
}

.pop_title_right_print {
width: 3%;
float: left;
text-align: right
}

.pop_title_right img {
margin: 5px 10px 5px 10px;
cursor: pointer
}

.pop_title_right_print img {
margin: 5px 10px 5px 10px;
cursor: pointer
}

.pop_content {
float: left;
width: 100%;
margin: 1px 0 0 0;
font-size: 14px
}

.pop_function {
float: left;
width: 100%;
height: 30px;
line-height: 30px;
border-top: 1px #fff solid;
text-align: center
}

.pop_search {
width: 100%;
height: 35px;
border-top: 1px #fff solid;
text-align: center;
font-size: 12px;
font-weight: bold;
margin: 5px 0 5px 0;
border-bottom: 3px #96D1DF dotted;
}

.pop_page {
width: 100%;
height: 25px;
text-align: center;
font-size: 12px;
border-top: 3px #96D1DF dotted;
vertical-align: middle;
}
</style>
<script type="text/javascript">
function getxy(e) {
var a = new Array();
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight;
while (e = e.offsetParent) {
t += e.offsetTop;
l += e.offsetLeft;
}
a[0] = t;
a[1] = l;
a[2] = w;
a[3] = h;
return a;
}
//----------------------------------
var DragForAll = {};
function _enableDragForAll(e, toMoveObj, obj2, obj3) {
if (DragForAll.o) {
return false;
}
var clickObj = document.getElementById(toMoveObj);
if (!clickObj) {
return;
}
DragForAll.o = clickObj;
if (document.getElementById(obj2)) {
DragForAll.p = document.getElementById(obj2);
}
DragForAll.xy = getxy(DragForAll.o);
e = e || event;
if (!clickObj.style.left) {
DragForAll.xx = new Array((e.x - DragForAll.xy[1]), (e.y - DragForAll.xy[0]));
} else {
DragForAll.xgap = parseInt(clickObj.style.left.substring(0, clickObj.style.left.indexOf("px")));
DragForAll.ygap = parseInt(clickObj.style.top.substring(0, clickObj.style.top.indexOf("px")));
DragForAll.xx = new Array((e.x - DragForAll.xgap), (e.y - DragForAll.ygap));
DragForAll.xgap -= DragForAll.xy[1];
DragForAll.ygap -= DragForAll.xy[0];
}
DragForAll.fitToCont = obj3;
if (obj3) {
DragForAll.fitArea = getxy(DragForAll.fitToCont);
}
return false;
}
function _DragObjForAll(e) {
if (!DragForAll.o) {
return;
}
e = e || event;
var old_left = e.x - DragForAll.xx[0];
var old_top = e.y - DragForAll.xx[1];
if (DragForAll.fitToCont) {
if ((old_left - DragForAll.xgap) - DragForAll.fitArea[1] <= 0 || old_top - DragForAll.ygap - DragForAll.fitArea[0] <= 0) {
return;
}
if (old_left - DragForAll.xgap + DragForAll.xy[2] >= DragForAll.fitArea[1] + DragForAll.fitArea[2] || old_top - DragForAll.ygap + DragForAll.xy[3] >= DragForAll.fitArea[0] + DragForAll.fitArea[3]) {
return;
}
}
DragForAll.o.style.left = old_left + "px";
DragForAll.o.style.top = old_top + "px";
if (DragForAll.p) {
DragForAll.p.style.left = (old_left + 5) + "px";
DragForAll.p.style.top = (old_top + 5) + "px";
}
}
function _releaseDragObjForAll(e) {
DragForAll = {};
}
document.onmousemove = function (e) {
_DragObjForAll(e);
};
document.onmouseup=function(e){
_releaseDragObjForAll(e);
e=e||event;
}
</script>
</head>
<body>
<form id="form1" runat="server">
     <div id ="mm">
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<input type="button" value="付款" onclick="xingZQYTree.style.display='';xingZQYTree.style.top=event.clientY;xingZQYTree.style.left=event.clientX" /> <div id="xingZQYTree" class="pop"
style="display: none; width: 400px; overflow: auto; position: absolute; background-color: #FFFFFF; border: 1px solid #0099CC; padding-left: 0px">
<div id="pop_title" class="pop_title"
onmousedown="_enableDragForAll(event,'xingZQYTree');" title='按住鼠标可随意拖动此窗口'>
<div class="pop_title_left" style="font-size: 14px">
&nbsp;&nbsp;退款单
</div>
<div class="pop_title_right">
<label title="关闭此窗口" onclick="xingZQYTree.style.display='none';">
&nbsp;X&nbsp;
</label>
</div>
</div>
<div class="pop_content">
<table>
      <tr>
           <td> <asp:Label ID="Label1" runat="server" Text="收款人："></asp:Label></td>
                            <td>
                                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
                           </tr>
                     <tr>
                     <td align="center"> 
                         <asp:Button ID="Button1" runat="server" Text="提交"  OnClick="Button1_Click"/></td>
                           </tr>
</table>
</div>
  </div>
</div>
</form>
</body>
</html>

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">楼上说的我有不同看法:楼主说刚接触js，我建议楼主用原生态的js一年之后，再用jQuery之类的js框架。
      

  2.   

    js方面，事件在Firefox没有x，y属性，替换成IE和Firefox都兼容的属性clientX，clientYDOM方面，用使用document.getElementById，而不是直接使用空间的ID得到控件的引用。加上xhml申明后，设置left，top这种属性要加上px单位<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
    <title>MyHtml.html</title>
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
    <style>
    /**
    * 弹出层css
    */
    .pop {
    width: 80%;
    border: 1px #96D1DF solid;
    background: #fff;
    padding: 1px;
    color: #333;
    position: absolute;
    top: 15%;
    left: 15%;
    height: auto;
    z-index: 10
    }/**
    * 弹出层css
    */
    .pop_ {
    width: 80%;
    border: 1px #96D1DF solid;
    background: #fff;
    padding: 1px;
    color: #333;
    position: absolute;
    top: 15%;
    left: 15%;
    height: auto;
    z-index: 10
    }.pop_title {
    float: left;
    width: 100%;
    height: 30px;
    line-height: 30px;
    /* background: #ecf9ff url ('../images/title_move.gif') center no-repeat; */
    background: #ecf9ff;
    border-bottom: 1px #d3ecf3 solid;
    color: #444;
    font-weight: bold
    }.pop_title_left {
    float: left;
    width: 90%;
    overflow: hidden;
    text-indent: 6px;
    cursor: move
    }.pop_title_left img {
    float: left;
    border: 0;
    margin: 10px 0 0 5px
    }.pop_title_right {
    width: 5%;
    float: right;
    text-align: right;
    cursor: pointer
    }.pop_title_right_print {
    width: 3%;
    float: left;
    text-align: right
    }.pop_title_right img {
    margin: 5px 10px 5px 10px;
    cursor: pointer
    }.pop_title_right_print img {
    margin: 5px 10px 5px 10px;
    cursor: pointer
    }.pop_content {
    float: left;
    width: 100%;
    margin: 1px 0 0 0;
    font-size: 14px
    }.pop_function {
    float: left;
    width: 100%;
    height: 30px;
    line-height: 30px;
    border-top: 1px #fff solid;
    text-align: center
    }.pop_search {
    width: 100%;
    height: 35px;
    border-top: 1px #fff solid;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    margin: 5px 0 5px 0;
    border-bottom: 3px #96D1DF dotted;
    }.pop_page {
    width: 100%;
    height: 25px;
    text-align: center;
    font-size: 12px;
    border-top: 3px #96D1DF dotted;
    vertical-align: middle;
    }
    </style>
    <script type="text/javascript">
        function getxy(e) {
            var a = new Array();
            var t = e.offsetTop;
            var l = e.offsetLeft;
            var w = e.offsetWidth;
            var h = e.offsetHeight;
            while (e = e.offsetParent) {
                t += e.offsetTop;
                l += e.offsetLeft;
            }
            a[0] = t;
            a[1] = l;
            a[2] = w;
            a[3] = h;
            return a;
        }
        //----------------------------------
        var DragForAll = {};
        function _enableDragForAll(e, toMoveObj, obj2, obj3) {
            if (DragForAll.o) {
                return false;
            }
            var clickObj = document.getElementById(toMoveObj);
            if (!clickObj) {
                return;
            }
            DragForAll.o = clickObj;
            if (document.getElementById(obj2)) {
                DragForAll.p = document.getElementById(obj2);
            }
            DragForAll.xy = getxy(DragForAll.o);
            e = e || event;
            if (!clickObj.style.left) {//===================
                DragForAll.xx = new Array((e.clientX - DragForAll.xy[1]), (e.clientY - DragForAll.xy[0]));
            } else {
                DragForAll.xgap = parseInt(clickObj.style.left.substring(0, clickObj.style.left.indexOf("px")));
                DragForAll.ygap = parseInt(clickObj.style.top.substring(0, clickObj.style.top.indexOf("px")));
    //===================
                DragForAll.xx = new Array((e.clientX - DragForAll.xgap), (e.clientY - DragForAll.ygap));
                DragForAll.xgap -= DragForAll.xy[1];
                DragForAll.ygap -= DragForAll.xy[0];
            }
            DragForAll.fitToCont = obj3;
            if (obj3) {
                DragForAll.fitArea = getxy(DragForAll.fitToCont);
            }
            return false;
        }
        function _DragObjForAll(e) {
            if (!DragForAll.o) {
                return;
            }
            e = e || event;//===================
            var old_left = e.clientX - DragForAll.xx[0];
            var old_top = e.clientY - DragForAll.xx[1];
            
            if (DragForAll.fitToCont) {
                if ((old_left - DragForAll.xgap) - DragForAll.fitArea[1] <= 0 || old_top - DragForAll.ygap - DragForAll.fitArea[0] <= 0) {
                    return;
                }
                if (old_left - DragForAll.xgap + DragForAll.xy[2] >= DragForAll.fitArea[1] + DragForAll.fitArea[2] || old_top - DragForAll.ygap + DragForAll.xy[3] >= DragForAll.fitArea[0] + DragForAll.fitArea[3]) {
                    return;
                }
            };
            DragForAll.o.style.left = old_left + "px";
            DragForAll.o.style.top = old_top + "px";
            if (DragForAll.p) {
                DragForAll.p.style.left = (old_left + 5) + "px";
                DragForAll.p.style.top = (old_top + 5) + "px";
            }
        }
        function _releaseDragObjForAll(e) {
            DragForAll = {};
        }
        document.onmousemove = function (e) {
            _DragObjForAll(e);
        };
        document.onmouseup = function (e) {
            _releaseDragObjForAll(e);
            e = e || event;
        }
    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <div id ="mm">
      <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <input type="button" value="付款" onclick="document.getElementById('xingZQYTree').style.display='';document.getElementById('xingZQYTree').style.top=event.clientY+'px';document.getElementById('xingZQYTree').style.left=event.clientX+'px';" /><div id="xingZQYTree" class="pop"
    style="display: none; width: 400px; overflow: auto; position: absolute; background-color: #FFFFFF; border: 1px solid #0099CC; padding-left: 0px">
    <!--------------------这里----------->
    <div id="pop_title" class="pop_title"
    onmousedown="_enableDragForAll(event,'xingZQYTree');" title='按住鼠标可随意拖动此窗口'>
    <div class="pop_title_left" style="font-size: 14px">
    &nbsp;&nbsp;退款单
    </div>
    <div class="pop_title_right"><!--------------------这里----------->
    <label title="关闭此窗口" onclick="document.getElementById('xingZQYTree').style.display='none';">
    &nbsp;X&nbsp;
    </label>
    </div>
    </div>
    <div class="pop_content">
    <table>
    <tr>
    <td> <asp:Label ID="Label1" runat="server" Text="收款人："></asp:Label></td>
      <td>
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
      </tr>
      <tr>
      <td align="center">  
      <asp:Button ID="Button1" runat="server" Text="提交" OnClick="Button1_Click"/></td>
      </tr>
    </table>
    </div>
    </div>
    </div>
    </form>
    </body>
    </html>
      

  3.   

    我这里Firefox3.6没问题。你是拷贝我上面的代码运行的吗？
      

  4.   

    我是用的
    Mozilla/5.0 (Windows; U; Windows NT 5.2; zh-CN; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13那里面不能拖动哦
      

  5.   

    晕了，版本和你的一样啊，只是我的系统是windows7的，我传到我网站去了，你看下下面url上的这个能拖动没。
    http://www.code-design.cn/eg/drag.html
      

  6.   

    我晕哦！ 我的Server 2003的，但是就是拖不动！