面向对象-拖拽

<script>
    // 一个页面上实现两个拖拽

    // 不同的效果：一个有边界限定，一个没有


    function Drag(ele){
        this.ele = ele;

        // 因为使用事件监听式绑定和删除
        // 又将事件处理函数单独封装成原型上的方法
        // 导致，this指向的问题
        // 修复之后
        // 导致，绑定和删除的不是一个事件处理函数
        // 所以，提前处理事件处理函数中的this指向，并将处理之后的函数保存到实例身上，方便绑定和删除找到同一个事件处理函数

        //事件绑定之前就将this绑定出来
        this.m = this.move.bind(this);//=>事件监听函数中的第三个回调函数；move；这个this指的是this.ele本身
        this.u = this.up.bind(this);//=>事件监听函数中的第三个回调函数；up；

        this.addEvent();
    }
    Drag.prototype.addEvent = function(){
        this.ele.addEventListener("mousedown",this.down.bind(this))//把正常的this传到down里面去
    }
    Drag.prototype.down = function(eve){
        var e = eve || window.event;
        this.x = e.offsetX;
        this.y = e.offsetY;
        document.addEventListener("mousemove",this.m);
        document.addEventListener("mouseup",this.u);
        e.preventDefault();
    }
    Drag.prototype.move = function(eve){
        var e = eve || window.event;
        this.ele.style.left = e.clientX - this.x + "px";
        this.ele.style.top = e.clientY - this.y + "px";
    }
    Drag.prototype.up = function(){
        document.removeEventListener("mousemove",this.m)//绑定和删除处理的是同一个事件处理函数，绑定的是bind返回的函数，删除的是move。bind每次执行都会返回一个新函数，绑定的是一个，删除的是一个，两个不相同。在绑定之前，只能把它存出来
        document.removeEventListener("mouseup",this.u)
    }

    var obox1 = document.querySelector(".box1");
    var obox2 = document.querySelector(".box2");
    new Drag(obox1);
    new Drag(obox2);
</script>

 混合继承拖拽：

<script>
    // 一个页面上实现两个拖拽

    // 不同的效果：一个有边界限定，一个没有


    function Drag(ele){
        this.ele = ele;

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

        this.addEvent();
    }
    Drag.prototype.addEvent = function(){
        this.ele.addEventListener("mousedown",this.down.bind(this))
    }
    Drag.prototype.down = function(eve){
        var e = eve || window.event;
        this.x = e.offsetX;
        this.y = e.offsetY;
        document.addEventListener("mousemove",this.m);
        document.addEventListener("mouseup",this.u);

        e.preventDefault();
    }
    Drag.prototype.move = function(eve){
        var e = eve || window.event;
        this.ele.style.left = e.clientX - this.x + "px";
        this.ele.style.top = e.clientY - this.y + "px";
    }
    Drag.prototype.up = function(){
        document.removeEventListener("mousemove",this.m)
        document.removeEventListener("mouseup",this.u)
    }

    function SmallDrag(ele){
        Drag.call(this,ele)  //有则传，无则传
    }
    for(var i in Drag.prototype){
        SmallDrag.prototype[i] = Drag.prototype[i]
    }


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


    new Drag(obox1);
    new SmallDrag(obox2);

    // 继承的应用场景：
    //     多个对象，互相之间有多个功能的重叠，可以使用继承，继承重叠的方法
    //     继承之后，如有差别，可以该别继承之后的方法
</script>

 class继承-拖拽

<script>
    // 一个页面上实现两个拖拽

    // 不同的效果：一个有边界限定，一个没有


    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.bind(this))//把正常的this传到down里面去
    }
    down(eve){
        var e = eve || window.event;
        this.x = e.offsetX;
        this.y = e.offsetY;
        document.addEventListener("mousemove",this.m);
        document.addEventListener("mouseup",this.u);
        e.preventDefault();
    }
    move(eve){
        var e = eve || window.event;
        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)
        }
    }
    var obox1 = document.querySelector(".box1");
    var obox2 = document.querySelector(".box2");
    new Drag(obox1);
    new SmallDrag(obox2);
</script>