vue拖动指令记录

let opt = {
    move: false,
    sx: 0,
    sy: 0,
    mx: 0,
    my: 0
}
// 点击
let mousedown = (el, event) => {
    let { pageX, pageY } = event;
    let { x, y } = el.getBoundingClientRect();
    Object.assign(opt, {
        move: true, sx: pageX - x, sy: pageY - y, mx: pageX - x, my: pageY - y
    });
    //  console.log(event);
    // 释放
    window.addEventListener("mousemove", mousemove.bind(el, el), false);
    window.addEventListener("mouseup", mouseup.bind(el, el), false);

}
// 移动
let mousemove = (el, event) => {
    let { move, sx, sy } = opt;
    if (!move) { return }
    let { pageX, pageY } = event;
    Object.assign(opt, {
        mx: pageX - sx, my: pageY - sy
    })
    Object.assign(el.style, {
        left: opt.mx + 'px', top: opt.my + 'px', transition: "none"
    })
}
// 释放
let mouseup = (el, event) => {

    let { x, y, width, height } = el.getBoundingClientRect();
    let { mx, my } = opt;
    let w_width = document.documentElement.offsetWidth;
    let w_height = document.documentElement.offsetHeight;
    opt.move = false;
    if (x <= 0) { mx = 0 }
    if (y <= 0) { my = 0 }
    if (w_width - x - width <= 0) { mx = w_width - width }
    if (w_height - y - height <= 0) { my = w_height - height }
    //console.log(w_width - x - width);
    Object.assign(opt, { sx: mx, sy: my })
    Object.assign(el.style, {
        left: mx + 'px', top: my + 'px', transition: "left 500ms"
    })
    window.removeEventListener("mousemove", mousemove);
    window.removeEventListener("mouseup", mouseup);
}

let move = {
    bind(el, binding, vnode) {
        el.addEventListener("mousedown", mousedown.bind(el, el), false);

    }
}