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 }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。