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 #div1:hover{
14 cursor: pointer;
15 }
16 </style>
17 </head>
18 <body>
19 文字内容<br />
20 文字内容<br />
21 文字内容
22 <div id="div1">文字内容文字内容文字内容文字内容</div>
23 <script>
24 var oDiv = document.getElementById('div1');
25
26
27 var disX = 0; //鼠标的横向距离
28 var disY = 0; //鼠标的纵向距离
29
30 oDiv.onmousedown = function(ev){
31 var oEvent = ev || event;
32 disX = oEvent.clientX - oDiv.offsetLeft;
33 disY = oEvent.clientY - oDiv.offsetTop;
34
35 function mouseMove(ev){
36 var oEvent = ev || event;
37 var l = oEvent.clientX - disX; //div1的横向距离
38 var t = oEvent.clientY - disY; ////div1的纵向距离
39
40 //根据最新的鼠标坐标来确定div的坐标
41 oDiv.style.left = l + 'px';
42 oDiv.style.top = t + 'px';
43 }
44
45
46 function mouseUp(ev){
47 this.onmousemove = null;
48 this.onmouseup = null;
49
50 if(oDiv.releaseCapture){
51 oDiv.releaseCapture();
52 }
53 }
54
55 if(oDiv.setCapture){
56 //IE
57 oDiv.onmousemove = mouseMove;
58
59 oDiv.onmouseup = mouseUp;
60
61 oDiv.setCapture(); //事件捕获，解决IE9以下兼容问题
62 }else{
63 //chrome、ff
64 document.onmousemove = mouseMove;
65
66 document.onmouseup = mouseUp;
67 }
68
69 //解决火狐拖拽的bug，取消默认事件
70 return false; //解决chrome、ff、IE9的兼容问题
71 }
72 </script>
73 </body>
74 </html>
