Está buscando detección de colisión de cuadro delimitador. Si desea generar un evento, debe probar repetidamente, pero sería mejor ejecutar la función sobre todos los objetos de su juego desde su ciclo de juego. El sandbox 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; }

Puede probar 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 los "obstáculos" que se superponen a "#collider".

La segunda permite:

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

Lo que le brinda (entre otras cosas), un evento de "colisión" al que vincularse:

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

E incluso puedes configurar:

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

para evitar que "#collider" se superponga a cualquier "obstáculo" mientras se arrastra.

en Javascript Nativo

 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; };