1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>拖拽</title>
6 <style>
7 #div1{
8 width: 200px;
9 height: 200px;
10 background: red;
11 position: absolute;
12 }
13 #div1:hover{
14 cursor: pointer;
15 }
16 </style>
17 </head>
18 <body>
19 <div id="div1"></div>
20 <script>
21 var oDiv = document.getElementById('div1');
22
23 var disX = 0; //鼠标的横向距离
24 var disY = 0; //鼠标的纵向距离
25
26 oDiv.onmousedown = function(ev){
27 var oEvent = ev || event;
28 disX = oEvent.clientX - oDiv.offsetLeft;
29 disY = oEvent.clientY - oDiv.offsetTop;
30
31 document.onmousemove = function(ev){
32 var oEvent = ev || event;
33 var l = oEvent.clientX - disX;
34 var t = oEvent.clientY - disY;
35
36 if(l<0){ //div从左边被拖出去
37 l = 0;
38 }else if(l > document.documentElement.clientWidth - oDiv.offsetWidth){
39 l = document.documentElement.clientWidth - oDiv.offsetWidth;
40 }
41 if(t<0){ //div从上边被拖出去
42 t = 0;
43 }else if(t>document.documentElement.clientHeight - oDiv.offsetHeight){
44 t = document.documentElement.clientHeight - oDiv.offsetHeight;
45 }
46
47 //根据最新的鼠标坐标来确定div的坐标
48 oDiv.style.left = l + 'px';
49 oDiv.style.top = t + 'px';
50 }
51
52 document.onmouseup = function(ev){
53 document.onmousemove = null;
54 document.onmouseup = null;
55 }
56
57 //解决火狐拖拽的bug，取消默认事件
58 return false;
59 }
60 </script>
61 </body>
62 </html>
