JS实现DIV拖拽移动

发表于 | 分类于
JS实现DIV拖拽移动

基本概念

鼠标事件有下面这几种：

onclick

鼠标点击事件

1
2
3
box.onclick = function(e){
    console.log(e)
}

onmousedown

鼠标按下事件

1
2
3
box.onmousedown = function(e){
    console.log(e)
}

onmouseup

鼠标松开事件

1
2
3
box.onmouseup = function(e){
    console.log(e)
}

onmousemove

鼠标移动事件

1
2
3
box.onmousemove = function(e){
    console.log(e)
}

onmouseover

鼠标经过事件

1
2
3
box.onmouseover = function(e){
    console.log(e)
}

onmouseout

鼠标划出事件

1
2
3
box.onmouseout = function(e){
    console.log(e)
}

事件中可取到的值

  • clientX、clientY
    点击位置距离当前body可视区域的x，y坐标
  • pageX、pageY
    对于整个页面来说，包括了被卷去的body部分的长度
  • screenX、screenY
    点击位置距离当前电脑屏幕的x，y坐标
  • offsetX、offsetY
    相对于带有定位的父盒子的x，y坐标
  • x、y
    和screenX、screenY一样

拖拽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
drag_user_camera() {
    let user_camera = this.$refs["user_camera"];
    user_camera.addEventListener('mousedown', mouseDown, false);

    document.addEventListener('mouseup', mouseUp, false);
    
    function mouseDown() {
        document.addEventListener('mousemove', sliderMove, false);
    }
    
    function mouseUp() {
        document.removeEventListener('mousemove', sliderMove, false);
    }
    
    function sliderMove(e) {
        user_camera.style.left = e.clientX + 'px';
        user_camera.style.top = e.clientY - (user_camera.clientHeight / 2) + 'px';
    }
},