js简单实现拖拽功能

<div class="mydiv1"></div>

.mydiv1 {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
}

let mydiv1 = document.querySelector(".mydiv1");
mydiv1.onmousedown = e => {
    let ev = e || window.event;
    let x = ev.clientX - mydiv1.offsetLeft;
    let y = ev.clientY - mydiv1.offsetTop;
    mydiv1.onmousemove = e => {
        let ev = e || window.event;
        let xx = ev.clientX;
        let yy = ev.clientY;
        mydiv1.style.left = xx - x + "px";
        mydiv1.style.top = yy - y + "px";
    }
    mydiv1.onmouseup = function () {
        mydiv1.onmousemove = "";
    }
}

function Drag(ele) {
    this.ele = ele;
    this.downFn();
}
Drag.prototype.downFn = function () {
    this.ele.onmousedown = e => {
        let ev = e || window.event;
        let x = ev.clientX - this.ele.offsetLeft;
        let y = ev.clientY - this.ele.offsetTop;
        this.moveFn(x, y);
        this.upFn();
    }
}
Drag.prototype.moveFn = function (x, y) {
    this.ele.onmousemove = e => {
        let ev = e || window.event;
        let xx = ev.clientX;
        let yy = ev.clientY;
        this.setStyle(xx - x, yy - y)
    }
}
Drag.prototype.upFn = function () {
    this.ele.onmouseup = () => {
        this.ele.onmousemove = "";
    }
}
Drag.prototype.setStyle = function (leftNum, topNum) {
    this.ele.style.left = leftNum + "px";
    this.ele.style.top = topNum + "px";
}
let mydiv1 = document.querySelector(".mydiv1");
let drag1 = new Drag(mydiv1);