javascript+css实现可拖动层，兼容IE，FF

zoukankan html css js c++ java

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>

截图：左上方的一个box你手动之后还是会回到原来的位置，右下的拖动哪，就在哪。。。

chaunceyhao

查看全文

相关阅读:
C++语言的url encode 和decode
ICE实现服务器客户端
 ICE:slice语言常识整理
 SSH框架总结（框架分析+环境搭建+实例源代码下载）
MyEclipse下XFire开发Webservice实例
 关于hashCode与equals
xcode 4.5 new feature __ ios6 新特性
 js中substr与substring的差别
 MP算法和OMP算法及其思想
 android传感器；摇一摇抽签功能

原文地址：https://www.cnblogs.com/shihao/p/1675779.html