直接上代码：
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"> <span>用户名：</span><input type="text" name="user" class="txt" /> </div> <div class="pass"> <span>密 码：</span><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:60px; } #login .user span, #login .pass span { *position:relative; *bottom:8px; } #login .txt { width:184px; border:1px solid #ccc; background:#fff; height:20px; padding:5px 8px; line-height:20px; } #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); } else { var obj = obj; } //去除首尾空格 function trim(str) { return str.replace(/(^s*)|(s*$)/, ''); } function fixEvent(event) { event.target = event.srcElement; event.preventDefault = fixEvent.preventDefault; return event; } fixEvent.preventDefault = function () { this.returnValue = false; }; obj.onmousedown = mousedown; function mousedown(e) { var e = e || fixEvent(window.event); var disX = e.clientX - obj.offsetLeft; var disY = e.clientY - obj.offsetTop; if (trim(obj.innerHTML) === 0) { e.preventDefault(); } if (e.target.tagName === 'H2') { document.onmousemove = move; document.onmouseup = up; } else { document.onmousemove = null; document.onmouseup = null; } function move(e) { var e = e || fixEvent(window.event); var left = e.clientX - disX; var top = e.clientY - disY; if (obj.setCapture) { obj.setCapture(); } if (left < 0) { left = 0; } else if (left > document.documentElement.clientWidth - obj.offsetWidth) { left = document.documentElement.clientWidth - obj.offsetWidth; } if (top < 0) { top = 0; } else if (top > document.documentElement.clientHeight - obj.offsetHeight) { top = document.documentElement.clientHeight - obj.offsetHeight; } obj.style.left = left + 'px'; obj.style.top = top + 'px'; }; function up() { if (obj.releaseCapture) { obj.releaseCapture(); } document.onmousemove = null; document.onmouseup = null; } }; }
调用代码：
window.onload = function () { var login = document.getElementById('login'); drag(login); };
欢迎批评指正！！！