a-ling

导航

拖拽--文字效果 

 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>

 

posted on 2017-04-12 16:44  a-ling  阅读(169)  评论(0)    收藏  举报