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>