JavaScript 拖拽 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             #div1{width: 200px;height:200px;background-color:red;position: absolute;}
 8         </style>
 9         <script>
10             window.onload=function(){
11                 var oDiv=document.getElementById('div1');
12                 var disX=0;
13                 var disY=0;
14 
15                 oDiv.onmousedown=function(ev){
16                     var oEvent=ev||event;
17 
18                     disX=oEvent.clientX-oDiv.offsetLeft;
19                     dixY=oEvent.clientY-oDiv.offsetTop;
20 
21                     document.onmousemove=function(ev){
22                         var oEvent=ev||event;
23                         var l=oEvent.clientX-disX;
24                         var t=oEvent.clientY-disY;
25 
26                         if(l<0){
27                             l=0;
28                         }
29                         else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
30                             l=document.documentElement.clientWidth-oDiv.offsetWidth;
31                         }
32 
33                         if(t<0){
34                             t=0;
35                         }
36                         else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
37                             t=document.documentElement.clientHeight-oDiv.offsetHeight;
38                         }
39                         
40                         oDiv.style.left=l+'px';
41                         oDiv.style.top=t+'px';
42                     }
43 
44                     document.onmouseup=function(ev){
45                         document.onmousemove=null;
46                         document.onmouseup=null;
47                     }
48 
49                     return false;
50                 }
51             }
52         </script>
53     </head>
54     <body>
55         <div id="div1">
56         </div>
57     </body>
58 </html>
拖拽

 

posted @ 2020-04-29 09:34  孝文  阅读(153)  评论(0)    收藏  举报