1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 div{100px; 8 height:100px; 9 } 10 #box{background:red; position:absolute; } 11 #box1{background:green;position:absolute;top:300px; left:300px;} 12 </style> 13 <script> 14 //两个碰撞的盒子。是建立在一个不动的基础上。所以可以根据不动的盒子求出四个方向的left和top值。然后再判断其是否碰撞，且碰撞的过程随时改变其层级，（原需 var 8个变量，现在只需4个变量） 15 function collText(obj,left,top,obj1){ 16 var l1=obj.offsetLeft-obj.offsetWidth; 17 var t1=obj.offsetTop-obj.offsetHeight; 18 var r1=obj.offsetLeft+obj.offsetWidth; 19 var b1=obj.offsetTop+obj.offsetHeight; 20 if(left<l1||top<t1||left>r1||top>b1){ 21 obj.style.zIndex=3; 22 obj1.style.zIndex=1; 23 return true; 24 }else{ 25 obj.style.zIndex=1; 26 obj1.style.zIndex=3; 27 return false; 28 } 29 }; 30 window.onload=function(){ 31 var oBox=document.getElementById('box'); 32 var oBox1=document.getElementById('box1'); 33 oBox.onmousedown=function(ev){ 34 var oEvent= ev || event; 35 var disX=oEvent.clientX-oBox.offsetLeft; 36 var disY=oEvent.clientY-oBox.offsetTop; 37 document.onmousemove=function(ev){ 38 var oEvent= ev || event; 39 var l=oEvent.clientX-disX; 40 var t=oEvent.clientY-disY; 41 oBox.style.left=l+'px' ; 42 oBox.style.top=t+'px' ; 43 if(collText(oBox1,l,t,oBox)){ 44 oBox1.style.background='green'; 45 }else{ 46 oBox1.style.background='yellow'; 47 } 48 49 }; 50 document.onmouseup=function(){ 51 document.onmousemove=null; 52 document.onmouseup=null; 53 oBox.reseaseCapture&&oBox.reseaseCapture(); 54 }; 55 oBox.setCapture&&oBox.setCapture(); 56 return false; 57 } 58 oBox1.onmousedown=function(ev){ 59 var oEvent= ev || event; 60 61 var disX1=oEvent.clientX-oBox1.offsetLeft; 62 var disY1=oEvent.clientY-oBox1.offsetTop; 63 document.onmousemove=function(ev){ 64 var oEvent= ev || event; 65 var le=oEvent.clientX-disX1; 66 var to=oEvent.clientY-disY1; 67 oBox1.style.left=le+'px' ; 68 oBox1.style.top=to+'px' ; 69 if(collText(oBox,le,to,oBox1)){ 70 oBox.style.background='red'; 71 }else{ 72 oBox.style.background='#000'; 73 } 74 }; 75 document.onmouseup=function(){ 76 document.onmousemove=null; 77 document.onmouseup=null; 78 oBox1.reseaseCapture&&oBox1.reseaseCapture(); 79 } 80 81 oBox1.setCapture&&oBox1.setCapture(); 82 return false; 83 } 84 } 85 </script> 86 </head> 87 88 <body> 89 <div id="box"></div> 90 <div id="box1"></div> 91 </body> 92 </html>