继承实现拖拽实例

一个页面有两个元素，都有拖拽，一个有边界限定，一个没有边界限定
// 注意：
// 因为利用事件监听绑定和删除事件
// 所以得有事件处理函数的名字
// 因为需要给事件处理函数加名字
// 所以要将事件处理函数单独封装
// 因为单独封装
// 所以导致事件处理函数中的this不再指向实例
// 因为时间处理函数中的this不再指向实例
// 所以需要使用bind方法改变this指向
// 因为bind每次执行会返回新函数
// 所以需要提前将要改变this指向的函数使用bind处理好

class Drag{
    constructor(ele){
        this.ele = ele;

        this.m = this.move.bind(this);
        this.u = this.up.bind(this);

        this.addEvent();
    }
    addEvent(){
        this.ele.addEventListener("mousedown",this.down(this))
    }
    down(that){
        return function(e){
            that.x = e.offsetX;
            that.y = e.offsetY;
            // console.log(that)
            document.addEventListener("mousemove",that.m)
            document.addEventListener("mouseup",that.u)
        }
    }
    move(e){
        this.ele.style.left = e.clientX - this.x + "px";
        this.ele.style.top = e.clientY - this.y + "px";
    }
    up(){
        document.removeEventListener("mousemove",this.m)
        document.removeEventListener("mouseup",this.u)
    }
}

class SmallDrag extends Drag{
    constructor(ele){
        super(ele);
    }
    move(e){
        var l = e.clientX - this.x;
        var t = e.clientY - this.y;

        if(l<0) l=0;
        if(t<0) t=0;
        if(l > document.documentElement.clientWidth - this.ele.offsetWidth){
            l = document.documentElement.clientWidth - this.ele.offsetWidth
        }

        this.ele.style.left = l + "px";
        this.ele.style.top = t + "px";
    }
}

// 一个页面有两个元素，都有拖拽，一个有边界限定，一个没有边界限定

var obox1 = document.querySelector(".box1");
var obox2 = document.querySelector(".box2");

new Drag(obox1);

new SmallDrag(obox2);