原文：https://www.jb51.net/article/195919.htm 拖拽 原理分析 对于拖拽一个div盒子，首先我们需要将鼠标移动到盒子上，然后按住鼠标左键，移动鼠标到目标位置，再松开鼠标，对于这一过程的分析， 显然需要三个鼠标事件： 按住鼠标：onmousedown 移动鼠标：onmousemove 松开鼠标：onmouseup 实现步骤 1、**鼠标按下时：**我们获取鼠标当前所在的位置距离页面左边界与上边界的距离，分别减去盒子距离页面左边界与上边界的值，这样我们 就得到了鼠标距离盒子左边界与上边界的值； 2、**鼠标移动时：**我们重新获取此时鼠标距离页面左边界与上边界的值，再用它们减去步骤一中得到的鼠标距离盒子左边界与上边界的 值，将得到的值重新赋给盒子，这样盒子就能与鼠标保持相对静止，在页面上移动； 3、**松开鼠标时：**将鼠标移动事件清除。 碰撞检测 原理分析 js中碰撞检测在应用于制作一些小游戏，如飞机大战、打砖块、贪吃蛇等，那么如何实现碰撞检测呢？ 对于两个矩形方块之间的碰撞，如果直接思考如何书写代码检测它们之间有没有发生接触，这是一个比较难的事情，我们可以换一个思路， 找出它们没有发生碰撞得情况，排除这些情况，那么剩余的情况必然是发生了碰撞。 如下图，检测方块a与b之间是否发生碰撞，我们可以分别获取a与b的上、下边的top值，左右边的left值，那么以下四种情况是没有发生碰撞的. 效果： [/upload/post_files/J2znZb41EOSw2MiE.html](/upload/post_files/J2znZb41EOSw2MiE.html)