▓▓▓▓▓▓ 大致介绍
碰撞检测是指在页面中有多个元素时，拖拽一个元素会出现碰撞问题，碰撞检测是以模拟拖拽和磁性吸附中的范围限定为基础的
效果：碰撞检测
▓▓▓▓▓▓ 碰撞检测
先来看看碰撞检测的原理
我们想要移动红色的方块，当它在大的方块外面时，大的方块为绿色。当它碰撞到大方块时，大方块变为黑色
我们采用9宫格的方法来进行碰撞检测
我们只需要排除四种不碰撞的情况，剩下的就是碰撞的情况
四种不碰撞的情况：
1、小方块在大方块上方（小方块的底边的位置小于大方块顶边的位置） 对应区域中的1、2、3
2、小方块在大方块下方（小方块的顶边的位置大于大方块底边的位置） 对应区域中的7、8、9
3、小方块在大方块左边（小方块的右边的位置小于大方块左边的位置） 对应区域中的1、4、7
4、小方块在大方块右边（小方块的左边的位置大于大方块右边的位置） 对应区域中的3、6、9
代码：
// 记录div当前的坐标值
var L = ev.clientX - mouseBoxleft;
var T = ev.clientY - mouseBoxTop; // 记录拖拽元素的位置
var T1 = T;
var B1 = T + obj.offsetHeight;
var L1 = L;
var R1 = L + obj.offsetWidth; // 记录碰撞元素的位置
var T2 = obj2.offsetTop;
var B2 = T2 + obj2.offsetHeight;
var L2 = obj2.offsetLeft;
var R2 = L2 + obj2.offsetWidth; if(R1 < L2 || B1 < T2 || L1 > R2 || T1 > B2 ){
obj2.style.background = "green";
}else{
obj2.style.background = "black";
}
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test2</title>
<style>
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
z-index: 999;
}
#box2{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
top: 200px;
left: 500px;
}
</style>
</head>
<body> <div id="box"></div>
<div id="box2"></div>
<script>
var oBox = document.getElementById('box');
var oBox2 = document.getElementById('box2'); drag(oBox,oBox2); function drag(obj,obj2){
obj.onmousedown = function(ev){
// 鼠标按下 var ev = ev || event; // 获取鼠标离div得距离
var mouseBoxleft = ev.clientX - this.offsetLeft;
var mouseBoxTop = ev.clientY - this.offsetTop; // IE浏览器，全局捕获
if(obj.setCapture){
obj.setCapture();
} document.onmousemove = function(ev){
// 鼠标按下左键并移动 var ev = ev || event; // 记录div当前的坐标值
var L = ev.clientX - mouseBoxleft;
var T = ev.clientY - mouseBoxTop; // 记录拖拽元素的位置
var T1 = T;
var B1 = T + obj.offsetHeight;
var L1 = L;
var R1 = L + obj.offsetWidth; // 记录碰撞元素的位置
var T2 = obj2.offsetTop;
var B2 = T2 + obj2.offsetHeight;
var L2 = obj2.offsetLeft;
var R2 = L2 + obj2.offsetWidth; if(R1 < L2 || B1 < T2 || L1 > R2 || T1 > B2 ){
obj2.style.background = "yellow";
}else{
obj2.style.background = "black";
} // 设置div移动时，它的位置
obj.style.left = L + 'px';
obj.style.top = T + 'px'; } document.onmouseup = function(){
// 鼠标左键抬起 document.onmousemove = document.onmouseup = null; //IE下，释放全局捕获 releaseCapture();
if ( obj.releaseCapture ) {
obj.releaseCapture();
}
} // 阻止默认行为
return false;
}
} </script>
</body>
</html>