拖拽类

思路

1. 考虑到每次使用拖拽的时候，要进行拖拽的元素会有所不同，这里需要将元素进行传参
2. 考虑我们是要做什么事情

鼠标按下：
① 记录鼠标位置
② 记录元素位置
③ 添加 移动 和 抬起事件


鼠标移动:
① 获取鼠标当前位置
②计算元素当前距离


鼠标抬起:
①移出相关事件

相关代码

class Drag {
    constructor(el){
        this.el = el;
        this.startMouse = {};
        this.startPosition = {};
        this.__proto__.down = this.down.bind(this);
        this.__proto__.move = this.move.bind(this);
        this.__proto__.up = this.up.bind(this);
        this.el.addEventListener("mousedown",this.down);
    }
    down(e){
        let {el,startMouse,startPosition} = this;
        startMouse.x = e.clientX;
        startMouse.y = e.clientY;
        startPosition.x = this.getPos("left");
        startPosition.y = this.getPos("top");
        document.addEventListener("mousemove",this.move);
        document.addEventListener("mouseup",this.up);
        e.preventDefault();
    }
    move(e){
        let {startMouse,startPosition} = this;
        let nowMouse = {
            x: e.clientX,
            y: e.clientY
        };
        let dis = {
           x: nowMouse.x - startMouse.x,
           y: nowMouse.y - startMouse.y
        };
        this.setPos({
            left: dis.x +  startPosition.x + "px",
            top: dis.y +  startPosition.y + "px"
        });
    }
    up(e){
        document.removeEventListener("mousemove",this.move);
        document.removeEventListener("mouseup",this.up);
    }
    getPos(attr){
        return parseFloat(getComputedStyle(this.el)[attr]);
    }
    setPos(attrs){
        Object.assign(this.el.style,attrs);
    }
}