¿Cómo detectar si dos divs tocan con jquery?

Question

Estoy desarrollando un simple juego de globos con dos divs. El problema es que no puedo activar una función cuando los dos divs se tocan entre sí.

Answer 1

Está buscando la detección de colisiones de caja delimitadora. Si quieres plantear un evento, tienes que probar varias veces, pero sería mejor simplemente ejecutar la función sobre todos tus objetos del juego desde tu bucle de juego. El recinto de seguridad está en 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

Usted puede tratar de jquery-collision más jquery-ui-draggable-collision. Divulgación completa: acabo de escribir y publicar estos en sourceforge.

El primero permite esto:

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

que es la lista de todos ".obstacle" que se superponen "#collider".

El segundo permite:

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

que le da (entre otras cosas), un evento de "colisión" de obligar a:

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

e incluso se puede configurar:

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

para evitar que "#colisionador" se solape con cualquier ".obstacle" mientras se arrastra.