拖拽碰撞--原声js(自身理解上新的方法)

 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>