拖拽碰撞检测

今天简单说一下怎么用JS实现拖拽碰撞检测

首先创建两个div，让其两个相距一定的距离，body内容如下：

css样式如下：

效果如下：

搞定之后再在javascript中写入相对应的代码 ：

首先要先获取wrap，红色div,蓝色div,代码如下：

第二 要让红色div 通过摁下移动事件让红色div移动，且不能超过wrap

代码如下

效果如下：

上面显示的图  是不管red的div不管怎么运动都跑不出wrap外面去

然后下面就是red的div和blue的div碰撞发生颜色改变   这样就可以完成检测效果，添加代码如下，当然是在wrap.onmousemove内添加判断

代码如下：

首先获取红色div和蓝色div的上下左右的位置

然后判断代码：

然后效果图如下：

离开后蓝色div变为以前的颜色：

好了 ，今天就写到这里 ，多谢；