继承 yu 拖拽

继承

一、继承的定义：

1、在一个类基础上定义一个新类叫继承，原有的类叫父类，新生成的类叫子类。
2、一个父类可以有多个子类，一个子类只能有一个父类。

二、继承的特点：
1、子类拥有父类的属性和方法
2、子类可以有自己新的属性和方法
3、子类可以重写（覆盖）父类的方法
4、可以声明父类，创建子类

写一个简单的对象

function Person(name,age) {
    this.name = name;
    this.age = age;
}
Person.prototype.showName = function () {
    console.log("名字：" + this.name);
};
Person.prototype.showAge = function () {
  console.log("年龄：" + this.age);
};

拖拽

首先写出我们要拖拽的物体

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }

        #box2 {
            background: green;
        }

        #box3 {
            background: blue;
        }
    </style>
  
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>

    <script src="DragBox.js"></script>
    <script>
        function  DragBoxText(boxId) {
            DragBox.call(this,boxId)
        }
        DragBoxText.prototype = new DragBox();
        DragBoxText.prototype.move = function  (x,y) {
            DragBox.prototype.move.call(this,x,y);
            this.box.innerHTML = x+"px"+y+"px"
        }       
        function  DragBoxs(boxId) {
            DragBox.call(this,boxId)
        }
        DragBoxs.prototype = new DragBox();
        DragBoxs.prototype.move = function  (x,y) {
            DragBox.prototype.move.call(this,x,y);
            if(x<=0 && y<=0){
                this.box.style.top = 0+"px"
                this.box.style.left = 0+"px"
            }else if (x<=0 ) {
                this.box.style.left = 0+"px"
                
            }else if(y<=0){
                this.box.style.top = 0+"px"
            }           
        }
             //
        new DragBoxText("box3");
        new DragBoxs("box2");
        new DragBox("box1");
        
    </script>

    </body>
</html>

引入我们的JS文件


function DragBox (boxId) {
    if (boxId == undefined) {
        return;
    }
    this.box = document.getElementById(boxId);
    var self = this;
    this.box.onmousedown = function  (e) {
        e.preventDefault();
        self.detaX = e.clientX-self.box.offsetLeft;
        self.detaY = e.clientY-self.box.offsetTop;
        self.start()
        document.onmouseup = function  () {
            self.stop()
        }
      }
    }
    DragBox.prototype.start = function  () {
        var self = this;
        document.onmousemove = function  (e) {
            var x = e.clientX - self.detaX;
            var y = e.clientY - self.detaY;
            self.move(x,y)
        }       
    }
    DragBox.prototype.move = function  (x,y) {
        var self = this;
        self.box.style.left = x+"px";
        self.box.style.top = y+"px"
    }
    DragBox.prototype.stop = function  () {
        document.onmousemove = null
    }

这里call的用法
call和apply，它们的作用都是将函数绑定到另外一个对象上去运行
两者的格式和参数定义：
call( this，var1，var2，… ); // 当前对象，参数列表（形参）
apply(this， [var1，var2,...] ); // 当前对象，必须是数组
这两函数的作用其实就是更改对象的内部指针，即改变对象的this指向的内容

继承 yu 拖拽

继承

拖拽

推荐阅读更多精彩内容