1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style media="screen">
9 * {
10 margin: 0;
11 padding: 0;
12 }
13 .nav {
14 height: 30px;
15 background-color: lemonchiffon;
16 line-height: 30px;
17 padding-left: 30px;
18 }
19 .nav a {
20 text-align: center;
21 font-size: 14px;
22 text-decoration: none;
23 color: #000;
24 }
25 .d-box {
26 width: 400px;
27 height: 300px;
28 border: 5px solid #ccc;
29 box-shadow: 2px #666;
30 position: absolute;
31 top: 40%;
32 left: 40%;
33 }
34 .hd {
35 width: 100%;
36 height: 25px;
37 background-color: #777;
38 line-height: 25px;
39 color: #fff;
40 cursor: move;
41 }
42 #box_close {
43 float: right;
44 cursor: pointer;
45 }
46 </style>
47 </head>
48 <body>
49 <!-- 顶部注册信息 -->
50 <div class="nav">
51 <a href="javascript:;" id="register">注册信息</a>
52 </div>
53
54 <!-- 可以移动的对话框 -->
55 <div class="d-box" id="d_box">
56 <div class="hd" id="drop">
57 <i>注册信息 (可以拖拽)</i>
58 <span id="box_close">【关闭】</span>
59 </div>
60 <div class="bd"></div>
61 </div>
62
63 <script src="animate.js" charset="utf-8"></script>
64 <script type="text/javascript">
65 var box = document.getElementById("d_box"); 66 var drop = document.getElementById("drop"); 67 //先按下，在移动触动此事件
68 drop.onmousedown = function(event){ 69 //获取鼠标在盒子中的坐标，将来移动的时候减去保证鼠标在盒子的指定位置
70 event = event || window.event; 71
72 var pagex = event.pageX || scroll().left + event.clientX; 73 var pagey = event.pageY || scroll().top + event.clientY; 74 var x = pagex - box.offsetLeft; 75 var y = pagey - box.offsetTop; 76
77 document.onmousemove = function(event){ 78 //把鼠标的坐标赋值给对话框。
79 event = event || window.event; 80 var xx = event.pageX || scroll().left + event.clientX; 81 var yy = event.pageY || scroll().top + event.clientY; 82 //二次操作鼠标位置
83 targetx = xx - x; 84 targety = yy - y; 85 //给box赋值
86 box.style.left = targetx + "px"; 87 box.style.top = targety + "px"; 88 //禁止文本选中（选中后取消）
89 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); 90 } 91 } 92 //事件解绑
93 drop.onmouseup = function(){ 94 document.onmousemove = null; 95 } 96 </script>
97 </body>
98 </html>
