拖拽的本质是登录框获得光标的偏移来调整自身的偏移。
拖拽发生时，光标相对盒子的坐标不会变化，相对于页面的坐标却在变化，二者的差值就是盒子需要的。
两个注意点：
1. 赋值给盒子的什么属性
outer.style.top = e.pageY - y + 'px';
outer.style.left = e.pageX - x + 'px';2. 差值是数字型的，需要加上'px'
这里面涉及三个鼠标事件，总结来说就是：
（1）鼠标按下，获得差值（上文提到的）
（2）鼠标移动，盒子移动（调用boxMove()）
（3）鼠标弹起，盒子不动（取消boxMove()）
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>PC端特效</title><style>* {margin: 0;padding: 0;}.outer {width: 300px;height: 204px;position: absolute;padding: 10px;border: solid 2px #1B5E20;background-color: #E8F5E9;}#register {text-align: center;margin-bottom: 40px;}.input {margin: 10px;}#btn {margin-top: 40px;margin-left: 100px;}</style>
</head><body><div class="outer"><p id='register'>登录</p><div class="input"><label for="username">用户名</label><input type="text"><label for="password">密码：</label><input type="password"><button id="btn">enter</button></div></div><script>var outer = document.querySelector('.outer');var p = outer.firstElementChild;console.log(p);p.addEventListener('mousedown', function (e) {console.log('鼠标按下了');var y = e.pageY - this.offsetTop;var x = e.pageX - this.offsetLeft;function boxMove(e) {outer.style.top = e.pageY - y + 'px';outer.style.left = e.pageX - x + 'px';}document.addEventListener('mousemove',boxMove);document.addEventListener('mouseup',function(){document.removeEventListener('mousemove',boxMove);});});</script>
</body></html>
