zoukankan      html  css  js  c++  java
  • 拖拽碰撞--原声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>
  • 相关阅读:
    linux之awk命令
    HDU 2097 Sky数 进制转换
    HDU 2077 汉诺塔IV
    HDU 2094 产生冠军 dfs加map容器
    HDU 2073 叠框
    HDU 2083 简易版之最短距离
    HDU 2063 过山车 二分匹配
    天梯 1014 装箱问题
    天梯 1214 线段覆盖
    天梯 1098 均分纸牌
  • 原文地址:https://www.cnblogs.com/lixuekui/p/5801252.html
Copyright © 2011-2022 走看看