javascript完美拖拽的实现方法
2024-05-06 14:35:19
供稿：网友
HTML代码：
代码如下:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="drag.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<div id="login">
<h2>网站登录</h2>
<div class="user">
用户名：<input type="text" name="user" class="txt" />
</div>
<div class="pass">
密 码：<input type="password" name="pass" class="txt" />
</div>
<div class="submit">
<input type="submit" value="登录" class="button" />
</div>
</div>
</body>
</html>
CSS代码：
代码如下:
body, h2 {
margin:0;
padding:0;
}
#login {
width:350px;
height:250px;
border:1px solid #ccc;
position:absolute;
left:512px;
top:300px;
}
#login h2 {
font-size:14px;
text-align:center;
height:30px;
line-height:30px;
background:#f60;
color:white;
cursor:move;
margin-bottom:30px;
letter-spacing:1px;
}
#login .user, #login .pass {
text-align:center;
font-size:12px;
height:60px;
line-height:40px;
}
#login .txt {
width:200px;
border:1px solid #ccc;
background:#fff;
height:30px;
line-height:30px;
}
#login .submit {
text-align:right;
}
#login .button {
width:100px;
height:30px;
background:#06f;
border:none;
cursor:pointer;
margin:10px 30px;
color:white;
letter-spacing:1px;
font-weight:bold;
}
拖拽核心代码：
代码如下:
function drag(obj) {
if (typeof obj === 'string') {
var obj = document.getElementById(obj);
