javascript+css实现可拖动层，兼容IE，FF
这边举的是儒通互联上登录框的例子，大家可以直接粘贴到HTML页面中保存即可运行，看到效果。
代码
<!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>
<title>www.rutongnet.com可拖动登录框层</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<style type="text/css">
*{margin:0 auto; padding:0 auto}
body{font-size:12px; font-family:宋; 体 }
.a1{float:left; background:#FFF; margin:5px; padding:5px}
.a2{float:right; background:#FFF; margin:5px; padding:5px}
#login{border:1px solid #99C2EE; float:none; width:370px; margin:0 auto; padding:0 0 10px}
#login h4{background:transparent url(http://www.rutongnet.com/img/login_bg.gif) no-repeat scroll left center; border-bottom:1px solid #438ECE; font-size:12px; font-weight:700; height:22px; padding:7px 0 0 30px}
#login h4:hover{cursor:move}
#login h4 span{cursor:pointer; float:right; padding-right:5px}
u{text-decoration:none}
#login ul{margin:0; padding:12px 0 11px}
#login ul li{list-style-type:none; padding:7px 0}
#login ul li span{color:#535353; font-size:12px; float:left; padding-right:5px; padding-top:7px; text-align:right; width:83px}
.inputstyle{border:1px solid #7F9DB9; color:gray; font-size:14px; height:14px; width:190px; margin:0; padding:5px}
#login label{color:#535353; margin-top:10px; position:absolute; padding:0 0 0 8px}
#login #verifytip{color:gray; padding:0 0 7px}
.login_button{float:none; margin:0 auto; padding:0 0 0 88px}
.btn{background:transparent url(http://www.rutongnet.com/img/login_btn3.gif) repeat scroll 0 0; border:0 none; color:#2473A2; cursor:pointer; font-size:14px; font-weight:700; height:28px; width:92px}
</style>
<script language="javascript" type="text/javascript">
function tuo(){
var objthis=this;
this.x=null;
this.y=null;
this.xx=null;
this.yy=null;
this.xxx=null;
this.yyy=null;
this.obja=null;
this.co=null;
this.t=null;
document.onmousemove=function(){
try{objthis.x=arguments[0].screenX;objthis.y=arguments[0].screenY;}
catch(err){objthis.x=window.event.x;objthis.y=window.event.y;}
}
}
tuo.prototype.create=function(a,b){
if(this.obja==null){
this.co=b;
var objthis=this;
this.obja=a;
this.obja.onmouseup=function(){objthis.up()}
this.xx=this.x;
this.yy=this.y;
this.xxx=this.obja.offsetLeft;
this.yyy=this.obja.offsetTop;
this.obja.style.position="absolute";
this.move();
}
}
tuo.prototype.move=function(){
var objthis=this;
var x=this.xxx + this.x - this.xx;
var y=this.yyy + this.y - this.yy;
this.obja.style.left = x + "px";
this.obja.style.top = y + "px";
this.t=setTimeout(function(){objthis.move()},1)
}
tuo.prototype.up=function(){
clearTimeout(this.t)
if(this.co==1){
this.obja.style.left = this.xxx + "px";
this.obja.style.top = this.yyy + "px";
}
this.xxx=null;
this.yyy=null;
this.obja=null;
}
var cc1=new tuo();
</script>
</head>
<body>
<div class="a1" onmousedown="cc1.create(this,1)">
<div class="main" id="login">
<h4>
<span><a href="javascript://" id="close"><img style="border: medium none ;" src="http://www.rutongnet.com/img/login_close.gif"></a></span>
<span><a target="_blank" href="http://www.rutongnet.com/help/help.html"><img style="border: medium none ;" src="http://www.rutongnet.com/img/login_help.gif"></a></span>
<u id="label_login_tltle">用户登录</u>
</h4>
<div id="web_login">
<ul>
<li><span><u id="label_uin">儒通账号：</u></span>
<input type="text" style="color: rgb(204, 204, 204);" tabindex="1" class="inputstyle" id="u">
<label>
<a target="_blank" href="http://account.rutongnet.com/register/" tabindex="7" id="label_newreg">注册新账号 </a>
</label>
</li>
<li><span><u id="label_pwd">儒通密码：</u></span>
<input type="password" value="" tabindex="2" maxlength="16" class="inputstyle" id="p">
<label>
<a href="http://account.rutongnet.com/forgetpwd/" target="_blank">忘了密码？</a></label>
</li>
<li id="verifyinput"><span><u id="label_vcode">验证码：</u></span>
<input type="text" name="verifycode" style="ime-mode: disabled;" class="inputstyle" id="verifycode" value="" maxlength="4" tabindex="3">
</li>
<li id="verifytip"><span></span><u id="label_vcode_tip">输入下图中的字符，不区分大小写</u> </li>
</ul>
<div class="login_button">
<input type="button" tabindex="5" value="登 录" class="btn" id="login_button"/>
</div>
</div>
</div>
</div>
<div class="a2" onmousedown="cc1.create(this)"><div class="main" id="login">
<h4>
<span><a href="javascript://" id="A1"><img style="border: medium none ;" src="http://www.rutongnet.com/img/login_close.gif"></a></span>
<span><a target="_blank" href="http://www.rutongnet.com/help/help.html"><img style="border: medium none ;" src="http://www.rutongnet.com/img/login_help.gif"></a></span>
<u id="label_login_tltle">用户登录</u>
</h4>
<div id="Div2">
<ul>
<li><span><u id="label_uin">儒通账号：</u></span>
<input type="text" style="color: rgb(204, 204, 204);" tabindex="1" class="inputstyle" id="u">
<label>
<a target="_blank" href="http://account.rutongnet.com/register/" tabindex="7" id="label_newreg">注册新账号 </a>
</label>
</li>
<li><span><u id="label_pwd">儒通密码：</u></span>
<input type="password" value="" tabindex="2" maxlength="16" class="inputstyle" id="Password1">
<label>
<a href="http://account.rutongnet.com/forgetpwd/" target="_blank">忘了密码？</a></label>
</li>
<li id="Li1"><span><u id="U4">验证码：</u></span>
<input type="text" name="verifycode" style="ime-mode: disabled;" class="inputstyle" id="verifycode" value="" maxlength="4" tabindex="3">
</li>
<li id="verifytip"><span></span><u id="label_vcode_tip">输入下图中的字符，不区分大小写</u> </li>
</ul>
<div class="login_button">
<input type="button" tabindex="5" value="登 录" class="btn" id="login_button"/>
</div>
</div>
</div></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.rutongnet.com可拖动登录框层</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<style type="text/css">
*{margin:0 auto; padding:0 auto}
body{font-size:12px; font-family:宋; 体 }
.a1{float:left; background:#FFF; margin:5px; padding:5px}
.a2{float:right; background:#FFF; margin:5px; padding:5px}
#login{border:1px solid #99C2EE; float:none; width:370px; margin:0 auto; padding:0 0 10px}
#login h4{background:transparent url(http://www.rutongnet.com/img/login_bg.gif) no-repeat scroll left center; border-bottom:1px solid #438ECE; font-size:12px; font-weight:700; height:22px; padding:7px 0 0 30px}
#login h4:hover{cursor:move}
#login h4 span{cursor:pointer; float:right; padding-right:5px}
u{text-decoration:none}
#login ul{margin:0; padding:12px 0 11px}
#login ul li{list-style-type:none; padding:7px 0}
#login ul li span{color:#535353; font-size:12px; float:left; padding-right:5px; padding-top:7px; text-align:right; width:83px}
.inputstyle{border:1px solid #7F9DB9; color:gray; font-size:14px; height:14px; width:190px; margin:0; padding:5px}
#login label{color:#535353; margin-top:10px; position:absolute; padding:0 0 0 8px}
#login #verifytip{color:gray; padding:0 0 7px}
.login_button{float:none; margin:0 auto; padding:0 0 0 88px}
.btn{background:transparent url(http://www.rutongnet.com/img/login_btn3.gif) repeat scroll 0 0; border:0 none; color:#2473A2; cursor:pointer; font-size:14px; font-weight:700; height:28px; width:92px}
</style>
<script language="javascript" type="text/javascript">
function tuo(){
var objthis=this;
this.x=null;
this.y=null;
this.xx=null;
this.yy=null;
this.xxx=null;
this.yyy=null;
this.obja=null;
this.co=null;
this.t=null;
document.onmousemove=function(){
try{objthis.x=arguments[0].screenX;objthis.y=arguments[0].screenY;}
catch(err){objthis.x=window.event.x;objthis.y=window.event.y;}
}
}
tuo.prototype.create=function(a,b){
if(this.obja==null){
this.co=b;
var objthis=this;
this.obja=a;
this.obja.onmouseup=function(){objthis.up()}
this.xx=this.x;
this.yy=this.y;
this.xxx=this.obja.offsetLeft;
this.yyy=this.obja.offsetTop;
this.obja.style.position="absolute";
this.move();
}
}
tuo.prototype.move=function(){
var objthis=this;
var x=this.xxx + this.x - this.xx;
var y=this.yyy + this.y - this.yy;
this.obja.style.left = x + "px";
this.obja.style.top = y + "px";
this.t=setTimeout(function(){objthis.move()},1)
}
tuo.prototype.up=function(){
clearTimeout(this.t)
if(this.co==1){
this.obja.style.left = this.xxx + "px";
this.obja.style.top = this.yyy + "px";
}
this.xxx=null;
this.yyy=null;
this.obja=null;
}
var cc1=new tuo();
</script>
</head>
<body>
<div class="a1" onmousedown="cc1.create(this,1)">
<div class="main" id="login">
<h4>
<span><a href="javascript://" id="close"><img style="border: medium none ;" src="http://www.rutongnet.com/img/login_close.gif"></a></span>
<span><a target="_blank" href="http://www.rutongnet.com/help/help.html"><img style="border: medium none ;" src="http://www.rutongnet.com/img/login_help.gif"></a></span>
<u id="label_login_tltle">用户登录</u>
</h4>
<div id="web_login">
<ul>
<li><span><u id="label_uin">儒通账号：</u></span>
<input type="text" style="color: rgb(204, 204, 204);" tabindex="1" class="inputstyle" id="u">
<label>
<a target="_blank" href="http://account.rutongnet.com/register/" tabindex="7" id="label_newreg">注册新账号 </a>
</label>
</li>
<li><span><u id="label_pwd">儒通密码：</u></span>
<input type="password" value="" tabindex="2" maxlength="16" class="inputstyle" id="p">
<label>
<a href="http://account.rutongnet.com/forgetpwd/" target="_blank">忘了密码？</a></label>
</li>
<li id="verifyinput"><span><u id="label_vcode">验证码：</u></span>
<input type="text" name="verifycode" style="ime-mode: disabled;" class="inputstyle" id="verifycode" value="" maxlength="4" tabindex="3">
</li>
<li id="verifytip"><span></span><u id="label_vcode_tip">输入下图中的字符，不区分大小写</u> </li>
</ul>
<div class="login_button">
<input type="button" tabindex="5" value="登 录" class="btn" id="login_button"/>
</div>
</div>
</div>
</div>
<div class="a2" onmousedown="cc1.create(this)"><div class="main" id="login">
<h4>
<span><a href="javascript://" id="A1"><img style="border: medium none ;" src="http://www.rutongnet.com/img/login_close.gif"></a></span>
<span><a target="_blank" href="http://www.rutongnet.com/help/help.html"><img style="border: medium none ;" src="http://www.rutongnet.com/img/login_help.gif"></a></span>
<u id="label_login_tltle">用户登录</u>
</h4>
<div id="Div2">
<ul>
<li><span><u id="label_uin">儒通账号：</u></span>
<input type="text" style="color: rgb(204, 204, 204);" tabindex="1" class="inputstyle" id="u">
<label>
<a target="_blank" href="http://account.rutongnet.com/register/" tabindex="7" id="label_newreg">注册新账号 </a>
</label>
</li>
<li><span><u id="label_pwd">儒通密码：</u></span>
<input type="password" value="" tabindex="2" maxlength="16" class="inputstyle" id="Password1">
<label>
<a href="http://account.rutongnet.com/forgetpwd/" target="_blank">忘了密码？</a></label>
</li>
<li id="Li1"><span><u id="U4">验证码：</u></span>
<input type="text" name="verifycode" style="ime-mode: disabled;" class="inputstyle" id="verifycode" value="" maxlength="4" tabindex="3">
</li>
<li id="verifytip"><span></span><u id="label_vcode_tip">输入下图中的字符，不区分大小写</u> </li>
</ul>
<div class="login_button">
<input type="button" tabindex="5" value="登 录" class="btn" id="login_button"/>
</div>
</div>
</div></div>
</body>
</html>
截图：左上方的一个box你手动之后还是会回到原来的位置，右下的拖动哪，就在哪。。。
