码迷,mamicode.com
首页 > 其他好文 > 详细

固定窗口中拖拽

时间:2020-04-29 13:06:13      阅读:50      评论:0      收藏:0      [点我收藏+]

标签:opened   ret   back   offset   odi   off   tle   close   char   

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

 

固定窗口中拖拽

标签:opened   ret   back   offset   odi   off   tle   close   char   

原文地址:https://www.cnblogs.com/shangec/p/12801330.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!