1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 <style>
7 div{width: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>
浙公网安备 33010602011771号