前端div拖拽移动

1.先明确offsetY clientY, pageY, screenY定义(X方向同理)

2.明确鼠标事件总共有7个，移动中会用三个（mousedown、mousemove、mouseup）

事件名称	事件发生状态
mousedown	鼠标按下时触发
mousemove	鼠标移动时触发
mouseup	鼠标抬起时触发
click	单击鼠标时触发
dbclick	双击鼠标时触发
mouseenter	鼠标移入到某元素上，不会产生事件冒泡
mouseleave	鼠标离开
mouseover	鼠标移入到某元素上，发生事件冒泡
mouseout	鼠标离开

 3.明确event含义

event表示事件的状态。需要在点击事件之后才可以触发。在移动时会用到：

1.鼠标位置 e.clientX e.clientY

2.鼠标选中元素位置 e.target.offsetLeft e.target.offsetTop

4.实现方法

4.1 首先记录元素初始位置（x,y） 鼠标位置（e.x,e.y）

4.2 移动过程中，鼠标位置（e.x',e.y'）

4.3 元素位置（e.x' - e.x + x, e.y' - e.y + y）

<div @mousedown="mousedown" id="move">移动div</div>

methods:{
    mousedown() {
        e.stopPropagation() //阻止事件冒泡
        e.preventDefault() //阻止发生自身事件 
        this.originPosition = { //div初始位置
            x: e.target.offsetLeft,
            y: e.target.offsetTop
        }
        this.originMouse = { // 鼠标初始位置
            x: e.clientX
            y: e.clientY
        }
        this.isMove = true
        window.addEventListener('mousemove', mousemove)
        window.addEventListener('mouseup', mouseup)
    },
    mousemove() {
        if(this.ismove) {
            this.moveMouse = { // 鼠标初始位置
                x: e.clientX
                y: e.clientY
            }
            let movePosition = {
                x: this.moveMouse.x - this.originMouse.x + this.originPosition.x,
                y: this.moveMouse.y - this.originMouse.y + this.originPosition.y,
            }
            document.getElementById('#move').style.top = movePosition.y + 'px'
            document.getElementById('#move').style.left= movePosition.x + 'px'
            
        }
        
    },
    mouseup() {
        this.ismove = false
        window.removeEventListener('mousemove', mousemove)
        window.removeEventListener('mouseup', mouseup)
    }
}