<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>九宫格碰撞</title><style>#box{ width:300px; height:300px; border:1px solid #ccc; margin:50px auto;}#box span{ display:block; width:100px; height:100px; float:left; color:#000; font-size:40px; text-align:center; line-height:100px; cursor:pointer; }#box span.bor{ border:1px dashed #f00; position:absolute;}</style><script>
window.οnlοad=function(){ var oBox=document.getElementById('box'); var aSpan=oBox.getElementsByTagName('span'); for(var i=aSpan.length-1;i>=0;i--){ aSpan[i].innerHTML=i+1; aSpan[i].style.background='rgb('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+')'; var ls=getPos(aSpan[i]).left; var ts=getPos(aSpan[i]).top; aSpan[i].style.left=ls+'px'; aSpan[i].style.top=ts+'px'; aSpan[i].style.position='absolute'; //设置坐标 为什么这儿不能用这个函数呢？请牛人指教下； //setAttr(aSpan[i],{left:ls+'px',top:ts+'px',position:'absolute'}); drag(aSpan[i]); }//生成n-m之间的随机数
function rand(n,m){ return parseInt( Math.random()*(m-n+1)+n) }; //获取样式 function getStyle(obj,attr){ return getComputedStyle()?getComputedStyle(obj,flase)[attr]:obj.getCurrentStyle(attr) }; //获取坐标 function getPos(obj){ var l=0,t=0; while(obj){ l+=obj.offsetLeft; t+=obj.offsetTop; obj=obj.offsetParent; } return {left:l,top:t} } //设置css function setAttr(obj,json){ //alert(obj) for(i in json){ obj.style[i]=json[i]; } } function isPeng(obj1,obj2){ var l1 = obj1.offsetLeft, r1 = obj1.offsetLeft + obj1.offsetWidth, t1 = obj1.offsetTop, b1 = obj1.offsetTop + obj1.offsetHeight, l2 = obj2.offsetLeft, r2 = obj2.offsetLeft + obj2.offsetWidth, t2 = obj2.offsetTop, b2 = obj2.offsetTop + obj2.offsetHeight; if(r1<l2 || b1<t2 || l1>r2 || t1>b2)return false; return true; } var z=0; //拖动效果 function drag(obj){ obj.οnmοusedοwn=function(ev){ z++; var oEvent=ev||event; var oNewSpan=document.createElement('span'); oNewSpan.className='bor'; setAttr(oNewSpan,{left:obj.offsetLeft+'px',top:obj.offsetTop+'px'}); var oPar=this.parentNode; oPar.appendChild(oNewSpan) obj.style.zIndex=z; var disX=oEvent.clientX-this.offsetLeft; var disY=oEvent.clientY-this.offsetTop; //记录刚开始的创建的span的坐标； var posJson={l:obj.offsetLeft,t:obj.offsetTop}; document.οnmοusemοve=function(ev){ var oEvent=ev||event; var l=oEvent.clientX-disX; var t=oEvent.clientY-disY; setAttr(obj,{left:l+'px',top:t+'px'});var i=0,len=aSpan.length,m=9999999999999999,near; for(i;i<len;i++){ if(aSpan[i]==obj)continue; if(isPeng(aSpan[i],obj)){ var ls=Math.abs(aSpan[i].offsetLeft-obj.offsetLeft); var ts=Math.abs(aSpan[i].offsetTop-obj.offsetTop); var cs=ts*ts+ls*ls; if(cs<m){ m=cs; near=aSpan[i]; } } } if(!near || near==obj){ return; }else{ setAttr(oNewSpan,{left:near.offsetLeft+'px',top:near.offsetTop+'px'}); setAttr(near,{left:posJson.l+'px',top:posJson.t+'px'});
posJson.l=oNewSpan.offsetLeft;
posJson.t=oNewSpan.offsetTop; } } document.οnmοuseup=function(){ document.οnmοusemοve=document.οnmοuseup=null; oPar.removeChild(oNewSpan) setAttr(obj,{left:posJson.l+'px',top:posJson.t+'px'}); } return false; } }}</script></head>
<body>
<div id="box"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span></div></body>
</html>