面向对象拖拽与继承

最新推荐文章于 2024-11-11 23:26:32 发布

aogy04408

最新推荐文章于 2024-11-11 23:26:32 发布

阅读量122

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/the0ne/articles/3251259.html

版权

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style>
 7 #box{width:100px;height:100px;background:#f00;position:absolute;}
 8 #box2{width:100px;height:100px;background:#000;position:absolute;}
 9 </style>
10 <script>
11 window.οnlοad=function()
12 {
13     new drag('box');
14     new LimitDrag('box2');    
15 };
16     function drag(id)
17     {
18         var _this=this;
19         this.disX = 0;
20         this.disY = 0;
21         this.oBox = document.getElementById(id);
22         this.oBox.οnmοusedοwn=function(ev)
23         {
24             _this.fnDown(ev);    
25         };
26     };
27     drag.prototype.fnDown=function(ev)
28     {
29         var ev = ev||event;
30         var _this = this;
31         this.disX = ev.clientX - this.oBox.offsetLeft;
32         this.disY = ev.clientY - this.oBox.offsetTop;
33         document.οnmοusemοve=function(ev)
34         {
35             _this.fnMove(ev);
36         };
37         document.οnmοuseup=function()
38         {
39             _this.fnUp();
40         };
41         return false;
42     };    
43 
44     drag.prototype.fnMove=function(ev)
45         {
46             var ev = ev||event;
47             this.oBox.style.left=ev.clientX - this.disX+'px';
48             this.oBox.style.top=ev.clientY - this.disY+'px';
49         };
50     drag.prototype.fnUp=function()
51         {
52             document.οnmοuseup=null;
53             document.οnmοusemοve=null;    
54         };    
55     function LimitDrag(id)
56     {
57         drag.call(this,id);    
58     };
59     for(i in drag.prototype)
60     {
61         LimitDrag.prototype[i]=drag.prototype[i];    
62     };
63     LimitDrag.prototype.fnMove=function(ev)
64     {
65         var ev = ev||event;
66         var l = ev.clientX - this.disX;
67         var t = ev.clientY - this.disY;
68         if(l<0){l=0}
69         else if(l>document.documentElement.clientWidth-this.oBox.offsetWidth){l=document.documentElement.clientWidth-this.oBox.offsetWidth;}
70         if(t<0){t=0}
71         else if(t>document.documentElement.clientHeight-this.oBox.offsetHeight){t=document.documentElement.clientHeight-this.oBox.offsetHeight};
72         this.oBox.style.left=l+'px';
73         this.oBox.style.top=t+'px';
74     };
75 </script>
76 </head>
77 
78 <body>
79 <div id="box"></div>
80 <div id="box2"></div>
81 </body>
82 </html>