Maison > Article > interface Web > Comment détecter les collisions entre les éléments jQuery ?

Comment détecter les collisions entre les éléments jQuery ?

Mary-Kate Olsenoriginal: 2024-11-12 17:26:02906parcourir

How do you detect collisions between jQuery `` elements?

Détection de collision entre les éléments jQuery Div

La détection de collisions entre éléments est une tâche fondamentale dans de nombreuses applications Web. Dans ce cas, l'objectif est de déterminer si deux

des éléments, représentés par des cases colorées, sont entrés en collision tout en se déplaçant perpendiculairement les uns aux autres.

Une approche efficace pour résoudre ce problème consiste à tirer parti de la fonction chevauchements fournie ci-dessous :

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] );
    };
})();

Cette fonction prend deux

éléments en tant que paramètres et renvoie une valeur booléenne indiquant s'ils se chevauchent en fonction de leurs positions et dimensions. La fonction récupère d'abord la position et la taille de chaque élément, puis compare leurs plages le long des axes x et y. Il renvoie vrai s'il y a un chevauchement dans les deux sens.

Pour démontrer l'utilisation de cette fonction, vous pouvez créer un ensemble de

éléments de votre document HTML, stylisez-les sous forme de zones et attribuez-leur des identifiants uniques pour les identifier. Ensuite, dans un script jQuery, vous pouvez appeler la fonction overlaps pour vérifier les collisions entre ces cases. Le code suivant fournit un exemple :

$(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 );
});

Dans cet exemple, une boîte rouge nommée "Red box" est créée et déplacée à l'aide de la souris. Plusieurs autres cases intitulées « Box 1 » à « Box 4 » sont positionnées à différents endroits dans la division « zone ». Le script jQuery vérifie les collisions entre la "boîte rouge" et chacune des autres cases et affiche les résultats dans une série de

éléments.

En utilisant la fonction chevauchements, vous pouvez implémenter efficacement la détection de collision pour jQuery

éléments, permettant des interactions dynamiques et une gestion des collisions en temps réel dans vos applications Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery html Boolean if for while using function this position

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment conserver les variables JavaScript sur plusieurs pages Web ?Article suivant：Comment conserver les variables JavaScript sur plusieurs pages Web ?

Articles Liés

Voir plus