javascript--鼠标拖拽窗口案例（鼠标按下，在鼠标移动过程中，盒子跟着一起移动，鼠标松开，盒子停止移动）
界面如图所示：
要求：在“信息注册”栏，按下鼠标，然后鼠标在页面移动，在鼠标移动过程中，该窗口跟着鼠标移动，当鼠标松开的时候，窗口停止移动。点击“关闭”，该窗口隐藏。
实现思路：
1.页面结构分析：一个大盒子d-box来确定位置，里面放一个小盒子drop（存放“注册信息（可以拖拽”文字和span标签，span存放“关闭”，id为box_close），鼠标在drop中按下，移动时候d-box跟着移动。
2.实现分析：
2.1 获取鼠标在盒子中的位置。通过鼠标在页面中的位置-盒子在页面的位置实现
①鼠标在页面的位置实现代码：
var x=e.pagex || e.clientx + (document.body.scrollleft || document.documentelement.scrollleft);
var y=e.pagey || e.clienty + (document.body.scrolltop || document.documentelement.scrolltop);
②盒子在页面中位置实现代码：
var box_x=box.offsetleft;
var box_y=box.offsettop;
③鼠标在盒子中的位置实现代码：
var mouse_in_box_x=x-box_x;
var mouse_in_box_y=y-box_y;
2.2 获取鼠标移动时盒子移动的位置。通过鼠标移动时，鼠标在页面的位置-鼠标在盒子中的位置实现。
①鼠标在页面的位置
var x=e.pagex || e.clientx + (document.body.scrollleft || document.documentelement.scrollleft);
var y=e.pagey || e.clienty + (document.body.scrolltop || document.documentelement.scrolltop);
②鼠标移动时盒子移动的位置代码实现：
var boxx=x-mouse_in_box_x;
var boxy=y-mouse_in_box_y;
2.3 给盒子样式赋值
box.style.left=boxx+'px';
box.style.top=boxy+'px';
3.注意：
①要移动的盒子，其pisition必须赋值，absolute或者relative，必须使其脱离文档流才能移动
②给盒子样式赋值时，一定要注意不能丢掉px单位
③事件对象e，位置e.pagex,滚动条滚动距离的兼容性。以前的博文里面有记录，完整代码中也做了处理。
完整代码如下：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>鼠标拖拽案例</title>
6
7 <style type="text/css">
8 *{
9 margin: 0px;
10 padding: 0px;
11 }
12
13 .d-box{
14 width: 400px;
15 height: 300px;
16 border: 5px solid #eee;
17 box-shadow: 2px 2px 2px 2px #666;
18 position: absolute;
19 top: 40%;
20 left: 40%;
21 background-color: white;
22 }
23
24 .hd{
25 height: 25px;
26 background-color: #7c9299;
27 color: white;
28 line-height: 25px;
29 cursor: move;
30 border-bottom: 1px solid #369;
31 }
32 #box_close{
33 float: right;
34 cursor: pointer;
35 }
36 </style>
37 </head>
38 <body>
39 <div id="d-box" class="d-box">
40 <div id="drop" class="hd">注册信息（可以拖拽）
41 <span id="box_close">【关闭】</span>
42 </div>
43 </div>
44
45 <!-- 插入js代码 -->
46 <script type="text/javascript">
47 /****************************盒子拖拽功能********************************/
48 //点击拖拽的“注册信息栏”，拖动整个盒子的移动。首先获得要拖拽的盒子
49 var box=document.getelementbyid('d-box');
50 var drop=document.getelementbyid('drop');
51 drop.onmousedown=function(e){
52 e = e || window.event;
53 //当鼠标按下的时候,获得鼠标在盒子中的位置
54 //鼠标在盒子中的位置=鼠标在页面中的位置-盒子在页面的位置
55 //鼠标在页面中的位置
56 var x=e.pagex || e.clientx + (document.body.scrollleft || document.documentelement.scrollleft);
57 var y=e.pagey || e.clienty + (document.body.scrolltop || document.documentelement.scrolltop);
58
59 //盒子在页面中的位置
60 var box_x=box.offsetleft;
61 var box_y=box.offsettop;
62 //鼠标在盒子中的位置
63 var mouse_in_box_x=x-box_x;
64 var mouse_in_box_y=y-box_y;
65
66 //注册鼠标移动事件,因为鼠标按下后,在页面移动,盒子跟着移动
67 document.onmousemove=function(e){
68 e = e || window.event;
69 //鼠标在页面中移动时,求盒子的坐标
70 //鼠标移动时盒子移动位置=鼠标当前位置-鼠标在盒子中移动的距离
71 x=e.pagex || e.clientx + (document.body.scrollleft || document.documentelement.scrollleft);
72 y=e.pagey || e.clienty + (document.body.scrolltop || document.documentelement.scrolltop);
73
74 var boxx=x-mouse_in_box_x;
75 var boxy=y-mouse_in_box_y;
76 //px一定不能忘
77 box.style.left=boxx+'px';
78 box.style.top=boxy+'px';
79 }
80 }
81
82 //当鼠标弹起时,移出鼠标移动事件
83 drop.onmouseup=function(){
84 document.onmousemove=null;
85 }
86
87 //点击关闭盒子,隐藏盒子
88 var box_close=document.getelementbyid('box_close');
89 box_close.onclick=function(){
90 box.style.display='none';
91 }
92 </script>
93 </body>
94 </html>
下一篇： 使用存储过程实现分页