JavaScript拖拽(四):面向对象和继承

前面的几篇拖拽文章是常规的写法,本文用面向对象的方式重写拖拽,然后继承出限制范围的拖拽。

父类


面向对象,假设构造函数为Drag,继承出的限制范围的拖拽为LimitDrag。
既然面向对象,就得有属性和方法。
属性:要拖拽的div,要保存的距离disX 和 disY;
方法:三个事件–down,move,up;
方法用原型的方式共享。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>面向对象的拖拽</title>
    <style type="text/css">
        #div1 {
            width: 100px;
            height: 100px;
            background: orange;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="div1"></div>

    <script type="text/javascript">
        function Drag(id) {
            var _this = this;
            this.oDiv = document.getElementById(id);
            this.disX = 0;
            this.disY = 0;
            //this.oDiv.onmousedown = this.fnDown;
            //上面注释的代码中this.fnDown中的this指的是this.oDiv,
            //而不是Drag,所以要先把Drag的this保存起来_this
            this.oDiv.onmousedown = function(ev) {
                console.log(this);//oDiv
                _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;
            var l = oEvent.clientX - this.disX;
            var t = oEvent.clientY - this.disY;
            this.oDiv.style.cssText = ';left:' + l + 'px;top:' + t + 'px;';
        }

        Drag.prototype.fnUp = function() {
            document.onmousemove = null;
            document.onmouseup = null;
        };
        new Drag('div1');
    </script>
</body>
</html>

这里写图片描述


继承


属性的继承用call欺骗方式,方法的继承用复制prototype的方式,因为prototype是对象,引用型变量,这里得注意!

Drag.js
function Drag(id) {
    var _this = this;
    this.oDiv = document.getElementById(id);
    this.disX = 0;
    this.disY = 0;
    this.oDiv.onmousedown = function(ev) {
        console.log(this);
        _this.fnDown(ev);
        return false;//阻止浏览器的一些默认行为bug
    };
}

Drag.prototype._getStyle = function(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, null)[attr];
    }
}


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;
    var l = oEvent.clientX - this.disX;
    var t = oEvent.clientY - this.disY;
    this.oDiv.style.cssText = ';left:' + l + 'px;top:' + t + 'px;';
}

Drag.prototype.fnUp = function() {
    document.onmousemove = null;
    document.onmouseup = null;
};

LimitDrag:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>继承</title>
    <script type="text/javascript" src="./Drag.js"></script>
    <style type="text/css">
        #div1 {
            width: 100px;
            height: 100px;
            background: orange;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="div1"></div>

    <script type="text/javascript">
        function LimitDrag(id) {
            Drag.call(this, id);//除了this,一定要考虑原有的参数
        }
        /*
            prototype属性是个对象,对象是引用型变量,不会复制,变量名都指向同一块内存地址
            LimitDrag.prototype = Drag.prototype;如果这么写的话,两者都指向同一块内存地址
            改动了两者都受影响,注意引用类型和基本类型的区别!
        */
        for (var i in Drag.prototype) {
            LimitDrag.prototype[i] = Drag.prototype[i];
        }

        //重写覆盖父类的fnMove
        LimitDrag.prototype.fnMove = function(ev) {
            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 - parseInt(this._getStyle(this.oDiv, 'width'))/*this.oDiv.offsetWidth*/) {
                l = document.documentElement.clientWidth - parseInt(this._getStyle(this.oDiv, 'width'))/*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.cssText = ';left:' + l + 'px;top:' + t +'px;';
        };

        new LimitDrag('div1');
    </script>
</body>
</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值