İki div, jquery ile temas halinde nasıl belirlenir?

Question

Sadece iki div ile basit bir balon oyunu geliştiriyorum. Sorun, iki divanın birbirlerine değdiği zaman bir fonksiyonu tetikleyemem.

Answer 1

Sınırlayıcı kutu çarpışma algılamasını arıyorsunuz. Bir etkinliği yükseltmek isterseniz, tekrar tekrar test etmelisiniz, ancak oyun döngüsünüzdeki tüm oyun nesneleri üzerindeki işlevi çalıştırmak daha iyi olurdu. sandbox 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

de misin jquery-collision artı jquery-ui-draggable-collision deneyebilirsiniz olduğunu. Tam açıklama: Sadece bunları kaynak kodunda yazdım ve yayınladım.

öncelikle bu izin verir:

"#collider" örtüşen tüm ".obstacle" listesidir

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

. bağlanma (diğer şeyler arasında) verir

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

, bir "çarpışma" olayı:

ikinci verir

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

Ve hatta ayarlayabilirsiniz:

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

"#collider" öğesini sürüklerken herhangi bir ".obstacle" ile örtüşmesini önlemek için

.