두 div가 jquery와 접촉하는지 감지하는 방법은 무엇입니까?

Question

저는 두 개의 div로 간단한 풍선 게임을 개발하고 있습니다. 문제는 두 div가 서로 접촉 할 때 함수를 트리거 할 수 없다는 것입니다.

Answer 1

경계 상자 충돌 감지를 찾고 있습니다. 이벤트를 발생 시키려면 반복적으로 테스트해야하지만 게임 루프에서 모든 게임 개체에 대해 함수를 실행하는 것이 좋습니다. 샌드 박스 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; 
    } 

Answer 2

에서 당신은 jquery-collision 플러스 jquery-ui-draggable-collision을 시도 할 수있다. 전체 공개 : 나는 sourceforge에서 이것을 썼다.

첫이 허용 :

"#collider를"오버랩 전체 '.obstacle "의 목록

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

. 에 바인딩 (무엇보다도)을 제공

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

하는 "충돌"이벤트 :

두 번째는 수

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

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

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

"#collider"가 드래그하는 동안 ".obstacle"과 중복되는 것을 방지합니다.