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

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

Mary-Kate Olsen
Libérer: 2024-11-12 17:26:02
original
991 Les gens l'ont consulté

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] );
    };
})();
Copier après la connexion

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 );
});
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal