con - Detección de colisiones jQuery/JavaScript

jquery change title

Question

¿Cómo detectar si dos elementos <div> han colisionado?

Los dos divs son cajas de colores simples que viajan perpendiculares entre sí, por lo que no hay formas o ángulos complicados.

Answer 1

Creo que esta es la forma más fácil: http://plugins.jquery.com/project/collidable

Aquí hay otro, en alemán: http://www.48design.de/news/2009/11/20/kollisionsabfrage-per-jquery-plugin-update-v11-8/

Yo les daría una oportunidad.

--ACTUALIZAR--

Realmente no puedo dedicarle nada en este momento, pero puedo cuando llegue a casa si nadie responde, pero tú harías algo como:

setInterval(function(){
            //First step would be to get the offset of item 1 and item 2
            //Second would be to get the width of each
            //Third would be to check if the offset+width ever overlaps
                //the offset+width of the 2nd
            //Fourth would be, if so, do X or set a class...
        },10);

Answer 2

EDITAR: He escrito una publicación de blog en mi sitio web. Aquí un enlace a él. http://area36.nl/2014/12/creating-your-own-collision-detection-function-in-javascript/

Bueno, tuve el mismo problema, pero gracias a la respuesta de Oscar Godson obtuve una función que funciona. Utilicé Jquery para una codificación fácil y porque soy flojo; p. Puse la función en otra función que se dispara cada segundo, así que tenlo en cuenta.

function collidesWith (element1, element2) {
    var Element1 = {};
    var Element2 = {};

    Element1.top = $(element1).offset().top;
    Element1.left = $(element1).offset().left;
    Element1.right = Number($(element1).offset().left) + Number($(element1).width());
    Element1.bottom = Number($(element1).offset().top) + Number($(element1).height());

    Element2.top = $(element2).offset().top;
    Element2.left = $(element2).offset().left;
    Element2.right = Number($(element2).offset().left) + Number($(element2).width());
    Element2.bottom = Number($(element2).offset().top) + Number($(element2).height());

    if (Element1.right > Element2.left && Element1.left < Element2.right && Element1.top < Element2.bottom && Element1.bottom > Element2.top) {
        // Do your stuff here
    }
}

Lo que hace es básicamente obtener todos los valores de element1 y luego obtener todos los valores de element2 . Luego, con la ayuda de algunos cálculos, descubre todos los valores. Luego, en la declaración if , compara el cuadrado del elemento1 con el cuadrado del element2 . Si los valores de element1 están entre los valores izquierdo, derecho, superior e inferior de element2 . Si eso es cierto, se ejecuta el código en la parte inferior.

Answer 3

Es un poco tarde para esto, pero supongo que podrías usar este enfoque que probé cuando tuve que enfrentar una situación similar. La ventaja aquí es que no hay ningún complemento adicional, o scripts involucrados, y tampoco es necesario introducir un sondeo hambriento de rendimiento en él. Esta técnica utiliza los métodos y eventos incorporados que ofrece el droppable de Jquery.

Ok, suficiente, esta es la técnica de solución: di si tienes dos elementos (imágenes en mi caso) y no quieres que se superpongan o detecten cuando lo hacen, haz que los dos elementos sean droppable y haz que ''acepten'' El uno al otro:

$([div1, div2]).droppable(CONFIG_COLLISSION_PREVENTION_DROPPABLE);

El ''CONFIG_COLLISSION_PREVENTION_DROPPABLE'' tiene el siguiente aspecto:

var originatingOffset = null;
CONFIG_COLLISSION_PREVENTION_DROPPABLE = {
    tolerance: "touch",
    activate : function (event, ui) {
        // note the initial position/offset when drag starts
        // will be usedful in drop handler to check if the move
        // occurred and in cae overlap occurred, restore the original positions.
        originatingOffset = ui.offset;
    },
    drop : function (event, ui) {
            // If this callback gets invoked, the overlap has occurred. 
            // Use this method to either generate a custom event etc.

            // Here, i used it to nullify the move and resetting the dragged element''s 
            // position back to it''s original position/offset
            // (which was captured in the ''activate'' handler)
        $(ui.draggable).animate({
            top: originatingOffset.top + "px",
            left: originatingOffset.left + "px"
        }, 300);
     }
}

Los controladores ''activate'' y ''drop'' se refieren a los eventos ''dropactivate'' y ''drop'' del complemento "droppable"

Aquí, la clave es la devolución de llamada ''drop''. Cada vez que cualquiera de los dos elementos se superponen y se caen uno sobre el otro, se llamará a la ''caída''. Este es el lugar para detectar y tomar acciones, puede enviar eventos personalizados o llamar a otras acciones (aquí elegí revertir las posiciones del elemento superpuesto a la posición inicial cuando se inició el arrastre, que se capturó en la devolución de llamada ''activate'').

Eso es. Sin encuestas, sin complementos, solo los eventos integrados.

Bueno, puede haber otras optimizaciones / extensiones hechas, esto fue simplemente el primer disparo de mi cabeza que funcionó :)

También puede usar los eventos ''dropover'' y ''dropout'' para señalar y crear una retroalimentación visual para el usuario de que dos elementos se superponen, mientras que aún pueden estar en movimiento.

var CLASS_INVALID = "invalid";
// .invalid { border: 1px solid red; }
...
$.extend(CONFIG_COLLISSION_PREVENTION_DROPPABLE, {
   over : function (event, ui) {
        // When an element is over another, it gets detected here;
        // while it may still be moved.
        // the draggable element becomes ''invalid'' and so apply the class here
        $(ui.draggable).addClass(CLASS_INVALID);
    },
    out : function(event, ui) {               
         // the element has exited the overlapped droppable now
         // So element is valid now and so remove the invalid class from it
         $(ui.draggable).removeClass(CLASS_INVALID);
    }
});

¡Espero que esto ayude!

Answer 4

La publicación es vieja, puede ser que ayude a alguien ...

function CheckDiv()
{
var ediv1 = document.getElementById(''DIV1'');
var ediv2 = document.getElementById(''DIV2'');

 ediv1.top = $(ediv1).offset().top;
 ediv1.left = $(ediv1).offset().left;
 ediv1.right = Number($(ediv1).offset().left) + Number($(ediv1).width());
 ediv1.bottom = Number($(ediv1).offset().top) + Number($(ediv1).height());

 ediv2.top = $(ediv2).offset().top;
 ediv2.left = $(ediv2).offset().left;
 ediv2.right = Number($(ediv2).offset().left) + Number($(ediv2).width());
 ediv2.bottom = Number($(ediv2).offset().top) + Number($(ediv2).height());

if (ediv1.right > ediv2.left && ediv1.left < ediv2.right && ediv1.top < ediv2.bottom && ediv1.bottom > ediv2.top)
 {
alert("hi");
}

if (ediv1.left > ediv2.left && ediv1.top > ediv2.top && ediv1.right < ediv2.right && ediv1.bottom < ediv2.bottom)
 {
alert("hello");
    }
}

Answer 5

Me encontré con este problema generalizado, así que (publicación completa) hice un complemento para él. Para consultas de colisión simples sobre objetos estáticos, intente esto:

http://sourceforge.net/projects/jquerycollision/

Lo que le permite obtener una lista de cuadros de colisión superpuestos (o ninguno si no hay colisión):

hits = $("#collider").collision(".obstacles");

O para obtener un evento de colisión durante "arrastrar", use esto:

http://sourceforge.net/apps/mediawiki/jquidragcollide/?source=navbar#collision

Lo que te da un evento de "colisión" para conectarte. (O un evento "protrusión", para ver si un div escapa de otro div que actualmente lo contiene).

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

Si está verificando colisiones durante un movimiento que no sea arrastrar, simplemente llame al original repetidamente, es bastante rápido. Nota: el arrastre no funciona bien con el cambio de tamaño.

Answer 6

var overlaps = (function () {
    function getPositions( elem ) {
        var pos, width, height;
        pos = $( elem ).position();
        width = $( elem ).width();
        height = $( elem ).height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }

    function comparePositions( p1, p2 ) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }

    return function ( a, b ) {
        var pos1 = getPositions( a ),
            pos2 = getPositions( b );
        return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] );
    };
})();

$(function () {
    var area = $( ''#area'' )[0],
        box = $( ''#box0'' )[0],
        html;
    
    html = $( area ).children().not( box ).map( function ( i ) {
        return ''<p>Red box + Box '' + ( i + 1 ) + '' = '' + overlaps( box, this ) + ''</p>'';
    }).get().join( '''' );

    $( ''body'' ).append( html );
});

body {
    padding: 30px;
    color: #444;
    font-family: Arial, sans-serif;
}

h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

#area {
    border: 2px solid gray;
    width: 500px;
    height: 400px;
    position: relative;
}

#area > div {
    background-color: rgba(122, 122, 122, 0.3);
    position: absolute;
    text-align: center;
    font-size: 50px;
    width: 60px;
    height: 60px;
}

#box0 {
    background-color: rgba(255, 0, 0, 0.5) !important;
    top: 150px;
    left: 150px;
}

#box1 {
    top: 260px;
    left: 50px;
}

#box2 {
    top: 110px;
    left: 160px;
}

#box3 {
    top: 200px;
    left: 200px;
}

#box4 {
    top: 50px;
    left: 400px;
}

p {
    margin: 5px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<h1>Detect overlapping with JavaScript</h1>
<div id="area">
    <div id="box0"></div>
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
    <div id="box4">4</div>
</div>

Idea general: obtienes el desplazamiento y la dimensión de los cuadros y compruebas si se superponen.

Si desea que se actualice, puede usar setInterval :

function detectOverlapping() {
    // code that detects if the box overlaps with a moving box
    setInterval(detectOverlapping, 25);
}

detectOverlapping();  

Además, tenga en cuenta que puede optimizar la función para su ejemplo específico.

• no es necesario que lea las dimensiones del cuadro repetidamente (como hago en mi código) ya que están corregidas. Puede leerlos en la carga de la página (en una variable) y luego simplemente leer la variable

• la posición horizontal de la pequeña caja no cambia (a menos que el usuario cambie el tamaño de la ventana). Las posiciones verticales de las cajas de automóviles no cambian. Por lo tanto, esos valores tampoco tienen que leerse repetidamente, pero también pueden almacenarse en variables.

• no es necesario que compruebe si la pequeña caja se superpone con todas las cajas de automóviles en todo momento. En función de su posición vertical, puede averiguar en qué carril se encuentra actualmente la caja y probar solo la caja específica de ese carril.