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