![[javascript]实现登陆界面拖动窗口](https://100zi.50zi.cn/uploadfile/img/15/971/f62f0b542f8b9151737378b206c3fc71.jpg)
本代码实现的是，类似于点击登陆链接后,在窗口上弹出登陆对话框，并且使得对话框可以移动的方法
代码中有添加代码解释
本代码在chrome下通过测试
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="/1999/xhtml"> 3 <head> 4<title></title> 5<style> 6.Middle{Position:absolute; 7 top:0; 8 left:0; 9 width:100%;10 height:100%;11 z-index:100;12 background-color:RGBA(120,120,120,0.5);13 }14 .PopupBox{Position:absolute;15 top:200px;16 left:400px;17 width:450px;18 height:300px;19 background-color:#999999;20 z-index:102;21 border-style:solid;22 border-width:3px;23 }24</style>25<script type="text/javascript">26 function Popup() {27 var PBoxClick = 0;28 var mid = document.createElement("div");29 mid.className = "Middle";30 document.body.appendChild(mid);31 var PBox = document.createElement("div");32 PBox.className = "PopupBox";33 document.body.appendChild(PBox);34 PBox.setAttribute("onmousedown", "MouseDown(this)");35 PBox.setAttribute("onmousemove","MouseMove(this)");36 PBox.setAttribute("onmouseup", "MouseUp(this)");37 PBox.setAttribute("moving", "0");38 PBox.style.cursor = "move";39 }40 var movex = 0; //保存上次移动的鼠标X坐标41 var movey = 0; //Y坐标42 function MouseMove(n) {43 44 if (n.moving == "down") { //如果鼠标down了，执行下面代码45 if (movex != 0 && movey != 0) { //如果是第一次点击，表明movex和movey还没初始化，不执行下面代码46 var x = parseInt(event.clientX - event.offsetX, 10) + (event.clientX - movex); 47 //可能是出于readonly的原因，div的坐标并不能通过n.style.left获取，所以采用了event.clientX - event.offsetX
//本人在这里纠结了很久，原来用n.style.left还以为是其他什么地方写错了
48 var y = parseInt(event.clientY - event.offsetY, 10) + (event.clientY-movey);49 n.style.left = x + "px";//设置div的位置50 n.style.top = y + "px";51 }52 movex = event.clientX;//保存这次鼠标坐标，供下次做移位使用53 movey = event.clientY;54 }55 56 }57 function MouseDown(n) {58 n.moving = "down";59 }60 function MouseUp(n) {61 n.moving="up";
movex=0;
movey=0;}62 63</script>64 </head>65 <body>66 <a href="javascript:Popup()">弹出窗口</a>67 </body>68 </html>
