思路
我们会根据点击事件里，鼠标坐标变化的前后来计算移动的距离，继而推出元素相对于视口顶部的距离与视口左边的距离，继而设置这个相对距离以达到拖拽的效果。
即计算拖拽完后元素相对于视口的垂直和水平距离。
先准备一个方块
- 给方块增加宽度和高度，设置
position: fixed让方块脱离文档流，相对于浏览器视口定位 - 顺便去掉body的内外边距，让方块贴着视口
实现拖拽的逻辑
准备记录鼠标初始位置，以及移动距离的全局变量
获取页面中的方块
给方块添加 mousedown 的事件监听器
编写 mousedown(鼠标按下) 触发的逻辑
- 鼠标按下视为开始一次拖拽，记录鼠标按下时，鼠标的位置，触发鼠标移动的监听
编写 mousemove(鼠标移动) 触发的逻辑
- 记录鼠标移动后，移动前后的垂直和水平距离，
- 若一次拖拽还未结束，需要更新初始鼠标的位置，为鼠标继续移动做准备，方便计算再一次移动后，移动前后的垂直和水平距离
- 然后修改方块的相对于视口顶部距离，即设置box样式的top，再修改方块相对于视口左边的距离，即设置box样式的left
- 设置的是红色部分的距离 top和left在这里的
再编写 mouseup(鼠标松开) 的逻辑
即鼠标松开 视为 结束这一次拖拽
最终成品
效果
方块可以移动到这个页面的任何地方
