面向对象改成拖拽和通过继承来达到限制范围拖拽

View Code

 1 window.onload=function()
 2 {
 3     new Drag('div1');
 4     new LimitDrag('div2');
 5 };
 6 
 7 function Drag(id)
 8 {
 9     this.disX=0;
10     this.disY=0;
11     var _this=this;
12     this.oDiv=document.getElementById(id);
13     
14     this.oDiv.onmousedown=function(ev)
15     {
16         _this.fnDown(ev);
17         return false;
18     };
19 };
20 
21 Drag.prototype.fnDown=function(ev)
22 {
23     var _this=this;
24     var oEvent=ev||event;
25     
26     this.disX=oEvent.clientX-this.oDiv.offsetLeft;
27     this.disY=oEvent.clientY-this.oDiv.offsetTop;
28     
29     document.onmousemove=function(ev)
30     {
31         _this.fnMove(ev);
32     };
33     
34     document.onmouseup=function()
35     {
36         _this.fnUp();
37     };
38 };
39 
40 Drag.prototype.fnMove=function(ev)
41 {
42     var oEvent=ev||event;
43     this.oDiv.style.left=oEvent.clientX-this.disX+'px';
44     this.oDiv.style.top=oEvent.clientY-this.disY+'px';
45 };
46 
47 Drag.prototype.fnUp=function()
48 {
49     document.onmousemove=null;
50     document.onmouseup=null;    
51 };
52 
53 /*继承*/
54 function LimitDrag(id)
55 {
56     Drag.call(this,id);
57 };
58 
59 for(var i in Drag.prototype)
60 {
61     LimitDrag.prototype[i]=Drag.prototype[i];
62 };
63 
64 LimitDrag.prototype.fnMove=function (ev)
65 {
66     var oEvent=ev||event;
67     var l=oEvent.clientX-this.disX;
68     var t=oEvent.clientY-this.disY;
69     
70     if(l<0)
71     {
72         l=0;
73     }
74     else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth)
75     {
76         l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
77     }
78     
79     this.oDiv.style.left=l+'px';
80     this.oDiv.style.top=t+'px';
81 };

  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 #div1{width:200px;height:200px;background:red;position:absolute;}
  8 #div2{width:200px;height:200px;background:green;position:absolute;left:300px;}
  9 </style>
 10 <script>
 11 /*面向过程*/
 12 /*
 13 window.onload=function()
 14 {
 15     var oDiv=document.getElementById('div1');
 16     
 17     oDiv.onmousedown=function(ev)
 18     {
 19         var oEvent=ev||event;
 20         var disX=oEvent.clientX-oDiv.offsetLeft;
 21         var disY=oEvent.clientY-oDiv.offsetTop;
 22         
 23         document.onmousemove=function(ev)
 24         {
 25             var oEvent=ev||event;
 26             oDiv.style.left=oEvent.clientX-disX+'px';
 27             oDiv.style.top=oEvent.clientY-disY+'px';
 28         };
 29         
 30         document.onmouseup=function(ev)
 31         {
 32             document.onmousemove=null;
 33             document.onmouseup=null;    
 34         };
 35     };
 36 };*/
 37 
 38 /*面向对象*/
 39 window.onload=function()
 40 {
 41     new Drag('div1');
 42     new LimitDrag('div2');
 43 };
 44 
 45 function Drag(id)
 46 {
 47     this.disX=0;
 48     this.disY=0;
 49     var _this=this;
 50     this.oDiv=document.getElementById(id);
 51     
 52     this.oDiv.onmousedown=function(ev)
 53     {
 54         _this.fnDown(ev);
 55         return false;
 56     };
 57 };
 58 
 59 Drag.prototype.fnDown=function(ev)
 60 {
 61     var _this=this;
 62     var oEvent=ev||event;
 63     
 64     this.disX=oEvent.clientX-this.oDiv.offsetLeft;
 65     this.disY=oEvent.clientY-this.oDiv.offsetTop;
 66     
 67     document.onmousemove=function(ev)
 68     {
 69         _this.fnMove(ev);
 70     };
 71     
 72     document.onmouseup=function()
 73     {
 74         _this.fnUp();
 75     };
 76 };
 77 
 78 Drag.prototype.fnMove=function(ev)
 79 {
 80     var oEvent=ev||event;
 81     this.oDiv.style.left=oEvent.clientX-this.disX+'px';
 82     this.oDiv.style.top=oEvent.clientY-this.disY+'px';
 83 };
 84 
 85 Drag.prototype.fnUp=function()
 86 {
 87     document.onmousemove=null;
 88     document.onmouseup=null;    
 89 };
 90 
 91 /*继承*/
 92 function LimitDrag(id)
 93 {
 94     Drag.call(this,id);
 95 };
 96 
 97 for(var i in Drag.prototype)
 98 {
 99     LimitDrag.prototype[i]=Drag.prototype[i];
100 };
101 
102 LimitDrag.prototype.fnMove=function (ev)
103 {
104     var oEvent=ev||event;
105     var l=oEvent.clientX-this.disX;
106     var t=oEvent.clientY-this.disY;
107     
108     if(l<0)
109     {
110         l=0;
111     }
112     else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth)
113     {
114         l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
115     }
116     
117     this.oDiv.style.left=l+'px';
118     this.oDiv.style.top=t+'px';
119 };
120 </script>
121 </head>
122 
123 <body>
124 <div id="div1">原来的  普通拖拽</div>
125 <div id="div2">继承的 限制范围拖拽</div>
126 </body>
127 </html>

相关阅读:
Vue
数组去重、数组中的对象去重
 Vue 拖拽组件 vuedraggable 、 vue-dragging 、awe-dnd
如何衡量一个人的 JavaScript 水平？
八个免费的Vue图标库
 vue中使用animate.css实现动画
 web本地存储（localStorage、sessionStorage）
vue引入iconfont报错
 RESTful API 最佳实践
 mysql 用户管理和权限设置
原文地址：https://www.cnblogs.com/52css/p/3014981.html