a-ling

导航

拖拽 

 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>

 

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