说来惭愧，我一直以为四四方方的拖拽碰撞检测是一个比较容易的事情，后来试过一次，真是让我耗费了无数的脑细胞，原理其实不难，但是具体做起来可就让我很恶心，这可能跟我驾驭的代码数量有关系，我一般也就写半屏幕的js代码，再多了，我感觉我就受不了，而这个拖拽碰撞真是然我写了好多行，写了将近130行，这才感觉到写代码真塔木德是一件恶心人的事情。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>碰撞检测</title> <style> * { margin:0; padding:0; } .c{ background:#9FF; overflow:hidden; padding-bottom:30px; width:550px; margin: 50px auto; position:relative; height:500px;} .a { height:100px; width:100px; background:#FF9; float:left; margin:30px 0 0 30px; } </style> </head> <body> <div class="c" id="wrap"> <div class="a">1</div> <div class="a">2</div> <div class="a">3</div> <div class="a">4</div> <div class="a">5</div> <div class="a">6</div> <div class="a">7</div> <div class="a">8</div> <div class="a">9</div> <div class="a">10</div> <div class="a">11</div> <div class="a">13</div> </div> </body> </html> <script type="text/javascript"> var o=document.getElementById("wrap"); var arr=o.getElementsByTagName("div"); for(var i=arr.length;i--;i>=0){ arr[i].style.left=arr[i].offsetLeft+"px"; arr[i].style.top=arr[i].offsetTop+"px"; arr[i].style.position="absolute"; arr[i].style.margin=0; m(arr[i]) } //拖动和各种判断 function m(obj){ var minD=1000; var num=null; obj.onmousedown=function(e){ var aa=[obj.offsetLeft,obj.offsetTop]; var e=e||event; var disX=e.clientX-obj.offsetLeft; var disY=e.clientY-obj.offsetTop; document.onmousemove=function(e){ var e=e||event; obj.style.left=e.clientX-disX+"px"; obj.style.top=e.clientY-disY+"px"; var s=siblings(obj); for(var i=0;i<s.length;i++){ if(c(obj,s[i])){ if(minD<distance(obj,s[i])){ minD=distance(obj,s[i]); num=i; } } } } document.onmouseup=function(){ exchangePosition(obj,siblings(obj)[num],aa); document.onmousemove=null; document.onmouseup=null; } return false; } } function exchangePosition(a,b,x){ if(b){ a.style.left=b.offsetLeft+"px"; a.style.top=b.offsetTop+"px"; b.style.left=x[0]+"px"; b.style.top=x[1]+"px"; }else{ a.style.left=x[0]+"px"; a.style.top=x[1]+"px"; } } //求两个Div之间的距离 function distance(x,y,z){ var l=x.offsetLeft+x.offsetWidth/2; var t=x.offsetTop+x.offsetHeight/2; var ll=y.offsetLeft+y.offsetWidth/2; var tt=y.offsetTop+y.offsetHeight/2; var dis=(l-ll)*(l-ll)+(t-tt)*(t-tt); return dis } //碰撞检测方法 function c(x,y){ var l=x.offsetLeft; var r=l+x.offsetWidth; var t=x.offsetTop; var b=t+x.offsetHeight; var ll=y.offsetLeft; var rr=ll+y.offsetWidth; var tt=y.offsetTop; var bb=tt+y.offsetHeight; if(r<ll || b<tt || l>rr || t>bb){ return false; }else{ return true; } } function siblings(obj){ return preall(obj).concat(nextall(obj)) } function preall(obj){ var arr=[]; var o=obj.previousSibling; while(o){ if(o.nodeType==1){ arr.unshift(o); } o=o.previousSibling; } return arr; } function nextall(obj){ var arr=[]; var o=obj.nextSibling; while(o){ if(o.nodeType==1){ arr.push(o); } o=o.nextSibling; } return arr; } </script>