1 //组件开发 : 多组对象,像兄弟之间的关系( 代码复用的一种形式 ) 2 window.onload=function(){ 3 var oDiv=document.getElementById('div1'); 4 var disX=0; 5 var disY=0; 6 7 oDiv.onmousedown=function(ev){ 8 var ev=ev || window.event; 9 disX=ev.clientX-oDiv.offsetLeft; 10 disY=ev.clientY-oDiv.offsetTop; 11 12 document.onmousemove=function(ev){ 13 var ev=ev || window.event; 14 oDiv.style.left=ev.clientX-disX+'px'; 15 oDiv.style.top = ev.clientY - disY + 'px'; 16 } 17 18 document.onmouseup = function(){ 19 document.onmousemove = null; 20 document.onmouseup = null; 21 }; 22 return false; 23 } 24 }
1 //先变形 2 var oDiv=null; 3 var disX=0; 4 var disY=0; 5 window.onload=function(){ 6 oDiv=document.getElementById('div1'); 7 init(); 8 } 9 function init(){ 10 oDiv.onmousedown=fnDown; 11 } 12 function fnDown(ev){ 13 var ev=ev || window.event; 14 disX=ev.clientX-oDiv.offsetLeft; 15 disY=ev.clientY-oDiv.offsetTop; 16 document.onmousemove = fnMove; 17 document.onmouseup = fnUp; 18 19 return false; 20 } 21 function fnMove(ev){ 22 var ev = ev || window.event; 23 oDiv.style.left = ev.clientX - disX + 'px'; 24 oDiv.style.top = ev.clientY - disY + 'px'; 25 } 26 function fnUp(){ 27 document.onmousemove = null; 28 document.onmouseup = null; 29 }
1 //改成面向对象 2 window.onload=function(){ 3 var d1=new Drag('div1'); 4 d1.init(); 5 6 var d2=new Drag('div2'); 7 d2.init(); 8 } 9 function Drag(id){ 10 this.oDiv=document.getElementById(id); 11 this.disX=0; 12 this.disY=0; 13 } 14 Drag.prototype.init=function(){ 15 var This=this; 16 this.oDiv.onmousedown=function(ev){ 17 var ev = ev || window.event; 18 This.fnDown(ev) 19 return false; 20 } 21 } 22 Drag.prototype.fnDown=function(ev){ 23 var This=this; 24 this.disX=ev.clientX-this.oDiv.offsetLeft; 25 this.disY=ev.clientY-this.oDiv.offsetTop; 26 document.onmousemove = function(){ 27 var ev = ev || window.event; 28 This.fnMove(ev); 29 }; 30 document.onmouseup = this.fnUp; 31 } 32 Drag.prototype.fnMove=function(ev){ 33 this.oDiv.style.left = ev.clientX - this.disX + 'px'; 34 this.oDiv.style.top = ev.clientY - this.disY + 'px'; 35 } 36 Drag.prototype.fnUp = function(){ 37 document.onmousemove = null; 38 document.onmouseup = null; 39 };
1 //组件开发 : 多组对象,像兄弟之间的关系( 代码复用的一种形式 ) 2 window.onload=function(){ 3 var d1=new Drag(); 4 d1.init('div1'); 5 6 var d2=new Drag(); 7 d2.init('div2'); 8 9 var d3=new Drag(); 10 d3.init('div3'); 11 12 var d4=new Drag(); 13 d4.init('div4'); 14 15 } 16 17 function Drag(){ 18 this.obj = null; 19 this.disX = 0; 20 this.disY = 0; 21 } 22 Drag.prototype.init = function(id){ 23 24 var This = this; 25 26 this.obj = document.getElementById(id); 27 28 this.obj.onmousedown = function(ev){ 29 var ev = ev || window.event; 30 This.fnDown(ev); 31 32 33 34 document.onmousemove = function(ev){ 35 var ev = ev || window.event; 36 This.fnMove(ev); 37 }; 38 document.onmouseup = function(){ 39 This.fnUp(); 40 41 42 43 }; 44 return false; 45 }; 46 47 }; 48 49 Drag.prototype.fnDown = function(ev){ 50 this.disX = ev.clientX - this.obj.offsetLeft; 51 this.disY = ev.clientY - this.obj.offsetTop; 52 }; 53 Drag.prototype.fnMove = function(ev){ 54 this.obj.style.left = ev.clientX - this.disX + 'px'; 55 this.obj.style.top = ev.clientY - this.disY + 'px'; 56 }; 57 Drag.prototype.fnUp = function(){ 58 document.onmousemove = null; 59 document.onmouseup = null; 60 }; 61 62 function extend(obj1,obj2){ 63 for(var attr in obj2){ 64 obj1[attr] = obj2[attr]; 65 } 66 }
1 window.onload=function(){ 2 var d1=new Drag(); 3 d1.init({ 4 id:'div1' 5 }); 6 7 var d2=new Drag(); 8 d2.init({ //配置参数 9 id:'div2', 10 toDown:function(){ 11 document.title = 'hello'; 12 document.body.style.background = 'black'; 13 } 14 }); 15 16 var d3 = new Drag(); 17 d3.init({ //配置参数 18 id : 'div3', 19 toDown : function(){ 20 document.title = 'hello'; 21 }, 22 toUp : function(){ 23 document.title = 'world'; 24 } 25 }); 26 27 var d4=new Drag(); 28 d4.init({ //配置参数 29 id : 'div4', 30 toUp : function(){ 31 document.title = 'hello vue'; 32 } 33 }); 34 35 } 36 37 function Drag(){ 38 this.obj = null; 39 this.disX = 0; 40 this.disY = 0; 41 42 this.settings={ //默认参数 43 toDown:function(){}, 44 toUp:function(){} 45 } 46 } 47 Drag.prototype.init = function(opt){ 48 49 var This = this; 50 51 this.obj = document.getElementById(opt.id); 52 53 extend(this.settings,opt); 54 this.obj.onmousedown = function(ev){ 55 var ev = ev || window.event; 56 This.fnDown(ev); 57 58 This.settings.toDown(); 59 60 document.onmousemove = function(ev){ 61 var ev = ev || window.event; 62 This.fnMove(ev); 63 }; 64 document.onmouseup = function(){ 65 This.fnUp(); 66 This.settings.toUp(); 67 68 69 }; 70 return false; 71 }; 72 73 }; 74 75 Drag.prototype.fnDown = function(ev){ 76 this.disX = ev.clientX - this.obj.offsetLeft; 77 this.disY = ev.clientY - this.obj.offsetTop; 78 }; 79 Drag.prototype.fnMove = function(ev){ 80 this.obj.style.left = ev.clientX - this.disX + 'px'; 81 this.obj.style.top = ev.clientY - this.disY + 'px'; 82 }; 83 Drag.prototype.fnUp = function(){ 84 document.onmousemove = null; 85 document.onmouseup = null; 86 }; 87 88 function extend(obj1,obj2){ 89 for(var attr in obj2){ 90 obj1[attr] = obj2[attr]; 91 } 92 }