【小河今学 | Javascript】鼠标拖拽方块运动

8.02 今天作业如下

创建一个div块，用鼠标事件实现拖拽功能。需求：

1）当鼠标放在div块上时，按下鼠标左键并移动鼠标，div块随之运动；

2）当松开鼠标左键，div块运动停止。

主要用到有、、、pageY、pageX

：按下鼠标键：鼠标移入：松开鼠标键e.pageY：相对于整个页面的Y值e.pageX：相对于整个页面的X值

首先还是创建一个小方块:

<div class="box2">div>

.box2 {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            position: relative;
        }

接着写JS部分，通过获取方块，接着写触发方块的事件，在方块上按下鼠标键后如果不加上事件，方块只能机械的点一下移动一下，所以需要加上来达到移动的效果。

接着就是将当前鼠标相对于页面的坐标赋给小方块，这里我加上-50是为了让鼠标处在小方块中间看起来比较好看，加不加都行。

	var box2 = document.querySelector('.box2');
    box2.onmousedown = function (e) { 
        box2.onmousemove = function(e) {
            this.style.top = e.pageY + -50 + 'px';
            this.style.left = e.pageX + -50 + 'px';
        }
        
    }
    box2.onmouseup = function (e) { 
        box2.onmousemove = function(e) {
            return false;
        }
        
    }

div_drag_mouse_event