js九宫格的碰撞检测

说来惭愧，我一直以为四四方方的拖拽碰撞检测是一个比较容易的事情，后来试过一次，真是让我耗费了无数的脑细胞，原理其实不难，但是具体做起来可就让我很恶心，这可能跟我驾驭的代码数量有关系，我一般也就写半屏幕的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>

View Code