继承案例_限制范围的拖拽

Drag.js

function Drag(id) {
    var _this = this;
    this.disX = 0;
    this.disY = 0;
    this.oDiv = document.getElementById(id);
    this.oDiv.onmousedown = function (ev) {
        _this.fnDown(ev);
    };
}

Drag.prototype.fnDown = function(ev) {
    var _this = this;
    var oEvent = ev||event;
    //鼠标距离减去物体位置
    this.disX = oEvent.clientX-this.oDiv.offsetLeft;
    this.disY = oEvent.clientY-this.oDiv.offsetTop;
    document.onmousemove = function (ev) {
        _this.fnMove(ev);
    };
    document.onmouseup = function () {
        _this.fnUp();
    };
};
Drag.prototype.fnMove = function(ev) {//限制范围添加到这里
    var oEvent = ev||event;
    this.oDiv.style.left = oEvent.clientX-this.disX+'px';
    this.oDiv.style.top = oEvent.clientY-this.disY+'px';
};
Drag.prototype.fnUp =function() {
    document.onmousemove = null;
    document.onmouseup = null;
}

LimitDrag.js

function LimitDrag(id) {
    //用构造函数伪装，继承属性
    Drag.call(this,id);
}
//用原型链继承方法
for(var i in Drag.prototype){
    LimitDrag.prototype[i] = Drag.prototype[i];
}
LimitDrag.prototype.fnMove = function (ev) {//覆盖Drag.js里的方法。
    var oEvent = ev||event;
    var l = oEvent.clientX-this.disX;
    var t = oEvent.clientY-this.disY;
    if(l<0){
        l=0;
    }else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth){
        l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
    }
    if(t<0){
        t=0;
    }else if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight){
        t=document.documentElement.clientHeight-this.oDiv.offsetHeight;
    }
    this.oDiv.style.left =l +'px';
    this.oDiv.style.top = t+'px';
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{width:100px;height:100px;background-color:green;position:absolute;left:0;top:0;}
        #div2{width:100px;height:100px;background-color:red;position:absolute;right:0;top:0;}
    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
<script type="text/javascript" src="Drag.js"></script>
<script type="text/javascript" src="LimitDrag.js"></script>
<script type="text/javascript">
    window.onload = function () {
        new Drag("div1");
        new LimitDrag("div2");
    }
</script>

 

posted @ 2016-11-10 18:18  最爱小虾  阅读(228)  评论(0)  编辑  收藏  举报