JS拖拽-面向对象拖拽-继承 

 1  //普通拖拽
 2  /*
 3  *   CSS   
 4  */
 5 #div1{ width:100px; height:100px; position:absolute; background:red; cursor:move;}
 6 
 7 /*
 8 *HTML
 9 */
10 <div id="div1"></div>
11 
12 
13 /*
14 *JavaScript
15 */
16 window.onload = function (){
17     var oDiv = document.getElementById("div1");
18     oDiv.onmousedown = function(ev){
19         var oEvent = ev || event;    //事件处理函数  ev是FF
20         var disX = oEvent.clientX - oDiv.offsetLeft;
21         var disY = oEvent.clientY - oDiv.offsetTop;
22         doucment.onmousemove = function (ev){
23             var oEvent = ev || event;
24             var l = oEvent.clientX - this.disX;
25             var t = oEvent.clientY - this.disY;
26             oDiv.style.left = l + "px";
27             oDiv.style.top = t + "px";
28             document.title = l + " , " + t;    //坐标
29             return false;    //阻止火狐默认事件
30         }
31         document.onmouseup = function (){
32             document.onmousemove = null;
33             document.onmouseup = null;
34         }
35     }
36 }

 

 1 //面向对象拖拽
 2 /*
 3 *CSS
 4 */
 5 #div1{ width:100px; height:100px; position:absolute; background:red; cursor:move;}
 6 #div2{ width:100px; height:100px; position:absolute; background:yellow; cursor:pointer;}
 7 
 8 /*
 9 *HTML
10 */
11 <div id="div1"></div>
12 <div id="div2"></div>
13 
14 /*
15 *Javascript
16 */
17 window.onload = function (){
18 
19     new Darg("div1");
20     new Darg("div2");
21 
22 }
23 function Darg(id){
24     var _this = this;
25     this.oDiv = document.getElementById(id);
26     this.oDiv.onmousedown = function (ev){
27         _this.ondown(ev);
28     }
29 }
30 Darg.prototype.ondown = function(ev){
31     var _this = this;
32     var oEvent = ev || event;
33     this.disX = oEvent.clientX - this.oDiv.offsetLeft;
34     this.disY = oEvent.clientY - this.oDiv.offsetTop;
35     document.onmousemove = function (ev){
36         _this.onmove(ev);
37     }
38     document.onmouseup = function (){
39         _this.onup();
40     }
41 }
42 Darg.prototype.onmove = function(ev){
43     var oEvent = ev || event;
44     var l = oEvent.clientX - this.disX;
45     var t = oEvent.clientY - this.disY;
46     this.oDiv.style.left = l + "px";
47     this.oDiv.style.top = t + "px";
48     document.title = l + " , " + t;    
49     return false;
50 }
51 Darg.prototype.onup = function(){
52     document.onmousemove = null;
53     document.onmouseup = null;
54 }

 

 1 //面向对象拖拽-继承
 2 /*
 3 *CSS
 4 */
 5 #div1{ width:100px; height:100px; position:absolute; background:red; cursor:move;}
 6 #div2{ width:100px; height:100px; position:absolute; background:yellow; cursor:pointer;}
 7 
 8 /*
 9 *HTML
10 */
11 <div id="div1"></div>
12 <div id="div2"></div>
13 
14 /*
15 *Javascript
16 */
17 window.onload = function (){
18 
19     new Darg("div1");
20     new extendsDarg("div2");
21     
22 }
23 //面向对象拖拽开始
24 function Darg(id){
25     var _this = this;
26     this.oDiv = document.getElementById(id);
27     this.oDiv.onmousedown = function (ev){
28         _this.ondown(ev);
29     }
30 }
31 Darg.prototype.ondown = function(ev){
32     var _this = this;
33     var oEvent = ev || event;
34     this.disX = oEvent.clientX - this.oDiv.offsetLeft;
35     this.disY = oEvent.clientY - this.oDiv.offsetTop;
36     document.onmousemove = function (ev){
37         _this.onmove(ev);
38     }
39     document.onmouseup = function (){
40         _this.onup();
41     }
42 }
43 Darg.prototype.onmove = function(ev){
44     var oEvent = ev || event;
45     var l = oEvent.clientX - this.disX;
46     var t = oEvent.clientY - this.disY;
47     this.oDiv.style.left = l + "px";
48     this.oDiv.style.top = t + "px";
49     document.title = l + " , " + t;    
50     return false;
51 }
52 Darg.prototype.onup = function(){
53     document.onmousemove = null;
54     document.onmouseup = null;
55 }
56 //面向对象拖拽结束
57 
58 //这里开始继承
59 function extendsDarg(id){
60         Darg.call(this,id);  
61 }
62 for(i in Darg.prototype){
63         extendsDarg.prototype[i] = Darg.prototype[i];
64 }
65 extendsDarg.prototype.onmove = function(ev){
66     var oEvent = ev || event;
67     var l = oEvent.clientX - this.disX;
68     var t = oEvent.clientY - this.disY;
69     if(l<0){
70       l = 0;
71     }else if(l>document.documentElement.clientWidth - this.oDiv.offsetWidth){
72       l = document.documentElement.clientWidth - this.oDiv.offsetWidth;
73     }
74     if(t<0){
75       t = 0;
76     }else if(t>document.documentElement.clientHeight - this.oDiv.offsetHeight){
77       t = document.documentElement.clientHeight - this.oDiv.offsetHeight;
78     }
79     this.oDiv.style.left = l + "px";
80     this.oDiv.style.top = t + "px";
81     document.title = l + " , " + t;    
82     return false;
83 }

 

posted @ 2014-03-21 10:26  半颠者  阅读(375)  评论(0)    收藏  举报