javascript 드래그 충돌 검출 실현

3320 단어 js부딪치다끌다
본 논문 의 사례 는 자 바스 크 립 트 가 드래그 충돌 검 사 를 실현 하 는 구체 적 인 코드 를 공유 하 였 으 며,구체 적 인 내용 은 다음 과 같 습 니 다.
드래그 충돌 검출 충돌 색상 변경
css:

<style>
    .div1{width: 100px;height: 100px;background: pink;position: absolute;}
    .div2{
     width: 150px;height: 150px;background: gray;position: absolute;
     top: 35%;
     left: 35%;
    }
</style>
html:

<body>
  <div class="div1"></div>
  <div class="div2"></div>
</body>
js:

 <script>
    window.onload = function () {
      var oDiv = document.getElementsByTagName("div")[0];
      var oDiv2 = document.getElementsByTagName("div")[1];
      
      //1.     
      oDiv.onmousedown = function (ev) {
        var oEvent = window.event || ev;
        //5.           
        //           
        var l = oEvent.clientX - oDiv.offsetLeft;
        //           
        var t = oEvent.clientY - oDiv.offsetTop;

        document.onmousemove = function (ev) {
          var oEvent = window.event || ev;
   //oEvent.preventDefault();
          //2.        
          var x = oEvent.clientX;
          var y = oEvent.clientY;
          
          //div     
          var x1 = x - l;
          var y1 = y - t;
          
          //div2     
          var oDiv2Width = oDiv2.offsetWidth;
          //div2 X  
          var oDiv2Left = oDiv2.offsetLeft;
          //         
          var div1L = x1 + oDiv.offsetWidth;
          //         
          var div1L2 = oDiv2Width + oDiv2Left;
          //           
          //         
          var div1Top = y1 + oDiv.offsetHeight;
          //        
          var div1Top2 = oDiv2.offsetTop + oDiv2.offsetHeight;
          
          
          
          if(div1L>=oDiv2Left && x1 <= div1L2 && div1Top>=oDiv2.offsetTop && y1 <=div1Top2){
           oDiv2.style.backgroundColor = 'yellow';
          }else{
           oDiv2.style.backgroundColor = 'gray';
          }          
                   
          //3.  div   
          oDiv.style.left = x1 + "px";
          oDiv.style.top = y1 + "px";
          //          
          //                ie    
          if(oDiv.setCapture){
           oDiv.setCapture();
          }
          return false;
          //  return false  ie      
        }  
      }

      oDiv.onmouseup = function () {
        //4.       
        //                      
        if(oDiv.releaseCapture){
         oDiv.releaseCapture()
        }
        document.onmousemove = null;
      }

    }
</script>


이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기