面向对象继承-限制范围的拖拽

来源：互联网发布：3d人像建模软件编辑：程序博客网时间：2024/06/11 12:12
<!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>
0 0