面向对象继承-限制范围的拖拽
2017-03-22 17:55
190 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> div{width:100px;height:100px;background:red;position:absolute;} #pox{background:blue;left:200px;} </style> <script> window.onload = function () { var d1 = new Drag('box'); d1.init(); var d2 = new LimitRangeDrag('pox'); d2.init(); } function Drag(id) { this.oBox = document.getElementById(id); this.disX = 0; this.disY = 0; } Drag.prototype.init = function() { var _this = this; this.oBox.onmousedown = function (ev) { var ev = ev || window.event; _this.fnDown(ev); return false; }; } Drag.prototype.fnDown = function (ev) { this.disX = ev.clientX - this.oBox.offsetLeft; this.disY = ev.clientY - this.oBox.offsetTop; var _this = this; document.onmousemove = function (ev){ var ev = ev || window.event; _this.fnMove(ev); }; document.onmouseup = function () { _this.fnUp(); }; } Drag.prototype.fnMove = function (ev) { this.oBox.style.left = ev.clientX - this.disX + 'px'; this.oBox.style.top = ev.clientY - this.disY + 'px'; } Drag.prototype.fnUp = function () { document.onmousemove = document.onmousedown = null; } // 限制范围的拖拽 function LimitRangeDrag(id) { // 继承属性 Drag.call(this, id); } // for in 拷贝继承 copy(LimitRangeDrag.prototype, Drag.prototype); function copy(child, parent) { for ( var attr in parent ) { child[attr] = parent[attr]; } } // 现在范围 LimitRangeDrag.prototype.fnMove = function (ev) { var L = ev.clientX - this.disX; var T = ev.clientY - this.disY; if(T > document.documentElement.clientHeight - this.oBox.offsetHeight){ T = document.documentElement.clientHeight - this.oBox.offsetHeight; } else if ( T < 0 ) { T = 0; } if(L > document.documentElement.clientWidth - this.oBox.offsetWidth){ L = document.documentElement.clientWidth - this.oBox.offsetWidth; } else if ( L < 0 ) { L = 0; } this.oBox.style.left = L + 'px'; this.oBox.style.top = T + 'px'; } </script> </head> <body> <div id="box"></div> <div id="pox"></div> </body> </html>
相关文章推荐
- 面向对象改成拖拽和通过继承来达到限制范围拖拽
- js面向对象(json对象、继承、面向对象拖拽)
- 分别用普通过程,面向对象过程,和继承方法实现拖拽效果
- JavaScript拖拽(四):面向对象和继承
- ASP.NET AJAX的面向对象思想--访问修饰与继承
- 【转】使用组合替代继承(面向对象软件设计的“开—闭”原则 )
- JavaScript 面向对象程序设计(下)--继承与多态
- JavaScript 面向对象程序设计(下)——继承与多态
- JavaScript 面向对象程序设计(下)——继承与多态(转)
- Javascript实现最简跨平台面向对象拖拽
- Java面向对象继承与组合的问题
- Javascript乱弹设计模式系列(0) - 面向对象基础以及接口和继承类的实现
- Delphi面向对象学习随笔四:继承与封装
- 面向对象设计原则七 - 组合优先于继承
- JavaScript 面向对象程序设计(下)——继承与多态
- Javascript实现最简跨平台面向对象拖拽
- JavaScript 面向对象程序设计(下)——继承与多态
- JavaScript的面向对象机理2)-继承
- JavaScript 面向对象程序设计(下)——继承与多态
- 关于javascript语言的继承、面向对象问题的文章