¿Cómo implemento detección de colisión entre un conjunto de elementos Div?

Question

tengo este ejemplo en jsfiddle

tengo una var como siendo el elemento de colisión:

var $div = $('.container'); 

y después de la colisión:

function test(){ 
    $('.drag') 
     .drag("start",function(ev, dd){ 
      dd.limit = $div.offset(); 
      dd.limit.bottom = dd.limit.top + $div.outerHeight() 
       - $(this).outerHeight(); 
      dd.limit.right = dd.limit.left + $div.outerWidth() 
       - $(this).outerWidth(); 
     }) 
     .drag(function(ev, dd){ 
      $(this).css({ 
       top: Math.min(dd.limit.bottom, Math.max(dd.limit.top, dd.offsetY)), 
       left: Math.min(dd.limit.right, Math.max(dd.limit.left, dd.offsetX)) 
      }); 
     }); 
} 

para:

<div class="container"></div> 
<div class="drag xxx" style="left:40px;"></div> 
<div class="drag xxx" style="left:120px;"></div> 
<div class="drag xxx" style="left:200px;"></div> 

Este código implementa la detección de colisión de la Divs hijo contra el contenedor div. ¿Cómo implementaría detección de colisión para hacer que esos 3 div colisionen entre sí?

Estoy pensando en configurar otro div: var $divs = $('.xxx'); pero no estoy seguro de cómo usarlo en este ejemplo.

Answer 1

Completo collision detection y correcto collision response no es un problema trivial para resolver, excepto en casos especiales.

El código que tiene ahora es bastante fácil de escribir porque solo tiene dos objetos para comparar (el objeto arrastrado y el contenedor) y porque la respuesta de colisión fue simplemente restringir la posición del div dentro del contenedor.

Para la colisión completa contra todos los divs, deberás verificar el div arrastrado contra el contenedor y todos los demás divs. La respuesta de colisión tendrá que calcular un vector de movimiento y manejar una lógica "deslizante" compleja para asegurarse de que puede moverse alrededor de otros objetos, pero asegúrese de que su posición final aún estará dentro del contenedor.

Le sugiero que primero vuelva a examinar su necesidad de detección de colisión completa, ya que puede ser complicado y complicado. Tal vez solo necesitas overlap detection, ala jQuery UI's droppable? O tal vez necesita algo como draggable snapping de jQuery UI o de jQuery UI?

Si determina que realmente necesita la detección de colisión completa, le sugiero que tome una biblioteca que ya maneja la detección de colisión, ya que es difícil de implementar. Ver respuestas sobre este tema durante algunos opciones de la biblioteca:

• Please recommend a JQuery plugin that handles collision detection for draggable elements

Si realmente desea implementar usted mismo, usted debe buscar la separación del eje Teorema:

• http://en.wikipedia.org/wiki/Separating_axis_theorem

Luego, leí los artículos sobre implementación de detección de colisión y SPUE como se ve en the N game:

• http://www.metanetsoftware.com/technique/tutorialA.html
• http://www.metanetsoftware.com/technique/tutorialB.html

Si necesita buscar más información, se puede considerar divs ser Axis-Aligned Bounding Boxes (AABB s).Esto puede darle enormes aumentos de perf y enormes reducciones de complejidad. La matemática para verificar AABB -to- AABB colisión es casi tan fácil como se consigue para la superposición y detección de colisión (aunque la respuesta de colisión sigue siendo tan difícil como con cualquier otro tipo de colisión).