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

8.02 今天作业如下
创建一个div块，用鼠标事件实现拖拽功能。需求：
1）当鼠标放在div块上时，按下鼠标左键并移动鼠标，div块随之运动；
2）当松开鼠标左键，div块运动停止。
主要用到有onmousedown、onmousemove、onmouseup、pageY、pageX

1. onmousedown：按下鼠标键
2. onmousemove：鼠标移入
3. onmouseup：松开鼠标键
4. e.pageY：相对于整个页面的Y值
5. e.pageX：相对于整个页面的X值

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

<div class="box2"></div>

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

接着写JS部分，通过querySelector获取方块，接着写触发方块的onmousedown事件，在方块上按下鼠标键后如果不加上onmousemove事件，方块只能机械的点一下移动一下，所以需要加上onmousemove来达到移动的效果。
接着就是将当前鼠标相对于页面的坐标赋给小方块，这里我加上-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;
        }
        
    }