js实现的可以拖动的对话框，但html的声明写成这样就拖不了了！！急！！请教高手！！在线等！！

以下是js代码：就是第一行惹的祸，代码本身没有问题！！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>可以拖动的对话框</title>
<link type="text/css" rel="stylesheet" href="DragableDialog.css"/>
<script type="text/javascript">
<!--
function $(obj){
return document.getElementById(obj);
}
function dialog(){
this.drag = function(obj){
var x, y;
var _this = this;
obj.parentNode.style.zIndex  = -1;
var isIE = (document.all) ? true : false;
obj.onmousedown = function(ev){
if(_this._activeDialog.activeDialog && _this._activeDialog.activeDialog != this){
_this._activeDialog.activeDialog.parentNode.style.zIndex  = -1
}
_this._activeDialog.activeDialog = this;
obj.parentNode.style.zIndex  = 1;
//obj.parentNode.setAttribute("z-index", zindex);
ev = ev || window.event;
x = ev.clientX - obj.parentNode.offsetLeft;
y = ev.clientY - obj.parentNode.offsetTop;
if(isIE){
document.attachEvent("onmousemove", mousemove_handle);
document.attachEvent("onmouseup", mouseup_handle);
}else{
document.addEventListener("mousemove", mousemove_handle, true);
document.addEventListener("mouseup", mouseup_handle, true);
}
};
function mousemove_handle(ev){
ev = ev || window.event;
obj.parentNode.style.top = ev.clientY - y;
obj.parentNode.style.left = ev.clientX - x;
}
function mouseup_handle(){
//obj.parentNode.style.zIndex  = -1;
if(isIE){
document.detachEvent("onmousemove", mousemove_handle);
document.detachEvent("onmouseup", mouseup_handle);
}else{
document.removeEventListener("mousemove", mousemove_handle, true);
document.removeEventListener("mouseup", mouseup_handle, true);
}
}
};
}
window.onload = function(){
dialog.prototype._activeDialog = {};
var t1 = new dialog();
t1.drag($("head1")); var t2 = new dialog();
t2.drag($("head2"));
}
//-->
</script>
</head>
<body>
<form>
<div id="dialog1" class="dialog">
<div id="head1" class="head">
<label>对话框1</label>
<a href="#"> X</a>
</div>
<div id="body1" class="body">
<div id="input1" class="input">
<input type="submit" value="确定"/>
<input name="button" type="button" value="重置"/>
</div>
</div>
</div>
<div id="dialog2" class="dialog">
<div id="head2" class="head">
<label>对话框2</label>
<a href="#"> X</a>
</div>
<div id="body2" class="body">
<div id="input2" class="input">
<input type="submit" value="确定"/>
<input name="button" type="button" value="重置"/>
</div>
</div>
</div>
</form>
</body>
</html>
以下是css：
.dialog{
position:absolute;
border:1px solid black;
width:250px;
height:170px;
}
.head{
position:absolute;
width:250px;
height:20px;
background-color:#3366CC;
left: 0px;
top: 0px;
}
.body{
position:absolute;
width:250px;
height:150px;
background-color:#233451;
top: 19px;
left: 0px;
}
.input{
position:absolute;
left: 73px;
top: 107px;
}

解决方案 »

  1.   

    是 css 的原因 ，没通过 w3c 
      

  2.   

    确实是css的原因，但里面没有错误。跟html的第一行声明有关，换成下面的就可以拖动了！！不知道什么原因？
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">这个声明就可以用了，很奇怪！！
      

  3.   

    对，目的就是将在Transitional类型的DOCTYPE下能可以用的代码改为在Strict类型的DOCTYPE下也能用的代码，呵呵，这问题应该去HTML里面问啊！！
      

  4.   

    脚本修改如下：
    function mousemove_handle(ev){ 
    ev = ev || window.event; 
    obj.parentNode.style.position="absolute";
    obj.parentNode.style.top = ev.clientY - y+"px"; 
    obj.parentNode.style.left = ev.clientX - x+"px"; 
    } 样式：
    .head{ 
    position:absolute; 
    width:250px; 
    height:20px; 
    background-color:#3366CC; 
    left: 0px; 
    top: 0px; 
    cursor:move;
    } 
    这样就能看出，鼠标在什么位置时能够移动
      

  5.   

    回复五楼：不好意思啊，刚才改错了文件！你的方法是对的，加上"px"就行了，这玩意还真严格啊，学习，以后要多注意了，我们开发都是在strict DOCTYPE下，有苦吃了啊！不废话了，给分！！