[JQUERY] 이 div의이 JQuery와 연락을 어떻게 감지?

이 div의이 JQuery와 연락을 어떻게 감지?

해결법

1. ---

   1.당신은 상자 충돌 감지를 경계 찾고 있습니다. 당신이 이벤트를 발생하려면 반복적으로 테스트해야하지만, 더 나은 당신의 게임 루프에서 모든 게임 오브젝트를 통해 함수를 실행하는 것입니다. 샌드 박스는 http://jsfiddle.net/nGRwt/7/에있다

   당신은 상자 충돌 감지를 경계 찾고 있습니다. 당신이 이벤트를 발생하려면 반복적으로 테스트해야하지만, 더 나은 당신의 게임 루프에서 모든 게임 오브젝트를 통해 함수를 실행하는 것입니다. 샌드 박스는 http://jsfiddle.net/nGRwt/7/에있다

     function collision($div1, $div2) {
         var x1 = $div1.offset().left;
         var y1 = $div1.offset().top;
         var h1 = $div1.outerHeight(true);
         var w1 = $div1.outerWidth(true);
         var b1 = y1 + h1;
         var r1 = x1 + w1;
         var x2 = $div2.offset().left;
         var y2 = $div2.offset().top;
         var h2 = $div2.outerHeight(true);
         var w2 = $div2.outerWidth(true);
         var b2 = y2 + h2;
         var r2 = x2 + w2;
   
         if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
         return true;
       }
   

2. ---

   2.당신은 JQuery와 충돌 플러스 JQuery와-UI-드래그 충돌을 시도 할 수 있습니다. 전체 공개 : 난 그냥 쓴 소스 포지에 다음을 발표했다.

   당신은 JQuery와 충돌 플러스 JQuery와-UI-드래그 충돌을 시도 할 수 있습니다. 전체 공개 : 난 그냥 쓴 소스 포지에 다음을 발표했다.

   첫 번째는이 있습니다 :

   var hit_list = $("#collider").collision(".obstacle");
   

   이는 "#collider을"중복 모든 ".obstacle"의 목록입니다.

   두 번째는 할 수 있습니다 :

   $("#collider").draggable( { obstacle: ".obstacle" } );
   

   어느, (무엇보다도)에 바인딩에 "충돌"이벤트를 제공합니다 :

   $("#collider").bind( "collision", function(event,ui){...} );
   

   그리고 당신도 설정할 수 있습니다 :

   $("#collider").draggable( { obstacle: ".obstacle", preventCollision: true } );
   

   드래그하는 동안 과거의 어떤 ".obstacle을"중복에서 "#collider"를 방지합니다.

3. ---

   3.네이티브 자바 스크립트

   네이티브 자바 스크립트

   var is_colliding = function(div1, div2) {
     var d1_height = div1.offsetHeight;
     var d1_width = div1.offsetWidth;
     var d1_distance_from_top = div1.offsetTop + d1_height;
     var d1_distance_from_left = div1.offsetLeft + d1_width;
   
     var d2_height = div2.offsetHeight;
     var d2_width = div2.offsetWidth;
     var d2_distance_from_top = div2.offsetTop + d2_height;
     var d2_distance_from_left = div2.offsetLeft + d2_width;
   
     var not_colliding =
       d1_distance_from_top < div2.offsetTop ||
       div1.offsetTop > d2_distance_from_top ||
       d1_distance_from_left < div2.offsetTop ||
       div1.offsetLeft > d2_distance_from_left;
   
     return !not_colliding;
   };
   

4. ---

   4.빅터 S로부터의 응답은 상기 유용하지만 두 div를 가린 즉, 완전 중복 여부를 확인하는 데 필요한 (그러나이 결과 이클립스 IDE 참조로 오염 된 이후 구글 어려웠다).

   빅터 S로부터의 응답은 상기 유용하지만 두 div를 가린 즉, 완전 중복 여부를 확인하는 데 필요한 (그러나이 결과 이클립스 IDE 참조로 오염 된 이후 구글 어려웠다).

   경우 누군가 내 수정 된 버전을 공유하는 것은 유용 발견 :

   () {(기능 $ / ** * 함수를 결정하는 첫 번째 요소 완전히인지 * 제 소자 일식 * / 기능 충돌 ​​($ DIV2, $ div1) { VAR X1 = $ div1.offset () 떠났다.; VAR Y1 = $ div1.offset () 상단.; VAR (H1) = $ div1.outerHeight (TRUE); VAR (W1) = $ div1.outerWidth (TRUE); VAR B1 = Y1 + H1; VAR R1 = X1 + W1; VAR × 2 = $ div2.offset () 떠났다.; VAR Y2 = $ div2.offset () 상단.; VAR H2 = $ div2.outerHeight (TRUE); VAR W2 = $ div2.outerWidth (TRUE); VAR B2 = Y2 + H2; VAR R2 = X2 + (W2); X1> X2 && Y1> Y2 && B1 <스크립트 SRC = "https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"> <강한> 드래그 div의 주위.

   가리는? <스팬 ID = "결과"> 거짓

   Div1
   

   가리는하지 않음

from https://stackoverflow.com/questions/5419134/how-to-detect-if-two-divs-touch-with-jquery by cc-by-sa and MIT license