JavaScript拖拽（四）：面向对象和继承

最新推荐文章于 2021-11-13 11:51:07 发布

GY_U_YG

最新推荐文章于 2021-11-13 11:51:07 发布

阅读量440

点赞数

分类专栏：前端拖拽文章标签： javascript 面向对象继承

本文链接：https://blog.csdn.net/GY_U_YG/article/details/72403835

版权

前端同时被 2 个专栏收录

61 篇文章 6 订阅

订阅专栏

拖拽

4 篇文章 0 订阅

订阅专栏

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

父类

面向对象，假设构造函数为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>