今天简单说一下怎么用JS实现拖拽碰撞检测
首先创建两个div,让其两个相距一定的距离,body内容如下:
css样式如下:
效果如下:
搞定之后再在javascript中写入相对应的代码 :
首先要先获取wrap,红色div,蓝色div,代码如下:
第二 要让红色div 通过摁下移动事件让红色div移动,且不能超过wrap
代码如下
效果如下:
上面显示的图 是不管red的div不管怎么运动都跑不出wrap外面去
然后下面就是red的div和blue的div碰撞发生颜色改变 这样就可以完成检测效果,添加代码如下,当然是在wrap.onmousemove内添加判断
代码如下:
首先获取红色div和蓝色div的上下左右的位置
然后判断代码:
然后效果图如下:
离开后蓝色div变为以前的颜色:
好了 ,今天就写到这里 ,多谢;