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
    评论
### 回答1: JavaScript中的对象是一种无序的键/值对集合。您可以使用对象来存储任意数据类型,并且可以使用键来访问这些数据。 创建对象的方式有多种,其中一种是使用对象字面量语法: ``` let obj = { key1: value1, key2: value2, ... }; ``` 您也可以使用构造函数来创建对象: ``` let obj = new Object(); obj.key1 = value1; obj.key2 = value2; ... ``` JavaScript还提供了一种称为原型的机制,可以在一个对象的基础上创建新对象。您可以使用Object.create()来创建一个新对象,并将其关联到另一个对象: ``` let obj1 = {key1: value1}; let obj2 = Object.create(obj1); ``` 访问对象中的值可以使用点语法或中括号语法: ``` console.log(obj.key1); console.log(obj['key1']); ``` 对象可以嵌套,创建多级对象 ``` let obj = { key1: { key2: { key3: value } } }; ``` JavaScript还提供了一种称为原型的机制,可以在一个对象的基础上创建新对象。 ### 回答2: JavaScript是一种重要的脚本语言,它的强大之处在于它的对象。可以把JavaScript对象看作是创建Web应用程序的基石。 JavaScript对象是一种复合数据类型,由属性和方法组成。每个对象都包含一组属性和方法,它们可以通过对象的名字来调用或者访问。对象可以创造新的属性和方法,也可以从其他对象继承属性和方法。JavaScript提供的对象类型有三种:原始对象、内置对象和宿主对象。 原始对象是指通过原型链创建的对象,它由用户自己定义或系统预定义的对象来创建。内置对象是指由JavaScript语言预定义的对象类型,这些对象JavaScript的核心,在任何JavaScript环境下都可以使用。宿主对象是指由浏览器或服务器环境提供的对象类型,可以用来操作系统、浏览器或者其他外部环境。 对象JavaScript的核心概念之一,所以对于JavaScript初学者来说,学习对象是非常重要的。在学习对象之前,需要先掌握基本的语法和编程概念,例如变量、函数和循环等。在学习对象之后,可以掌握面向对象编程的思想,用对象的方式来组织和管理代码,使得代码更加清晰和易于维护。 总之,学习JavaScript对象是非常重要的,因为它们是JavaScript编程的核心和基石。掌握JavaScript对象可以让你更好地理解JavaScript编程的本质,从而更好地开发Web应用程序。 ### 回答3: JavaScript是一门面向对象的语言,它的核心特性之一就是对象。JS对象是一组属性的集合,每个属性都由一个字符串和一个值组成,这个值可以是函数。对象可用于封装数据和功能,以及创建可重复使用的代码块,从而实现更高效的编程。 在JavaScript中,对象的创建方式有两种:字面量和构造函数。字面量方式创建对象非常简单,只需要按照对象的键-值对方式来书写,如下所示: ```javascript var person = { name: 'Alice', age: 20, sayHello: function() { console.log("Hello, I'm "+this.name); } } ``` 上述代码中,我们定义了一个名为`person`的对象,它有两个属性`name`和`age`,以及一个方法`sayHello`。使用字面量方式创建对象,我们可以很方便地定义对象的初始状态。 另一种创建对象的方式是构造函数。构造函数本质上是一种特殊的函数,以函数的形式返回一个新的对象,实现对象的构建。`new`操作符用来创建对象的实例,如下所示: ```javascript function Person(name, age) { this.name = name; this.age = age; this.sayHello = function() { console.log("Hello, I'm "+this.name); }; } var person1 = new Person('Bob', 30); var person2 = new Person('Charlie', 40); ``` 在上述代码中,我们创建了一个名为`Person`的构造函数,这个函数接受两个参数`name`和`age`,并将它们赋值给对象的属性。使用`new`操作符创建实例`person1`和`person2`时,会执行构造函数,并返回一个新的对象。 除了创建对象JavaScript还提供了一些内置对象,如`Math`、`Date`、`String`、`Array`等。这些内置对象提供了一些预定义的属性和方法,使得编写JavaScript代码更加高效和简便。 总而言之,理解JavaScript对象及其使用方式是非常重要的,因为大多数JavaScript代码都是围绕对象进行的。只有深入了解对象,才能更好地进行JavaScript编程。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值