suchen

Heim >Web-Frontend >js-Tutorial >Wie erkennt man Kollisionen zwischen jQuery-Elementen?

Wie erkennt man Kollisionen zwischen jQuery-Elementen?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-12 17:26:02998Durchsuche

How do you detect collisions between jQuery `` elements?

Kollisionserkennung zwischen jQuery-Div-Elementen

Das Erkennen von Kollisionen zwischen Elementen ist eine grundlegende Aufgabe in vielen Webanwendungen. In diesem Fall besteht das Ziel darin, festzustellen, ob zwei spezifische

Elemente, die als farbige Kästchen dargestellt werden, sind kollidiert, während sie sich senkrecht zueinander bewegten.

Ein wirksamer Ansatz zur Lösung dieses Problems besteht darin, die unten bereitgestellte Funktion Überlappungen zu nutzen:

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

Diese Funktion benötigt zwei

Elemente als Parameter und gibt einen booleschen Wert zurück, der angibt, ob sie sich basierend auf ihren Positionen und Abmessungen überlappen. Die Funktion ruft zunächst die Position und Größe jedes Elements ab und vergleicht dann deren Bereiche entlang der x- und y-Achse. Es gibt „true“ zurück, wenn es in einer der beiden Richtungen eine Überlappung gibt.

Um die Verwendung dieser Funktion zu demonstrieren, können Sie einen Satz von

erstellen. Elemente in Ihrem HTML-Dokument, formatieren Sie sie als Boxen und weisen Sie ihnen zur Identifizierung eindeutige IDs zu. Anschließend können Sie innerhalb eines jQuery-Skripts die Funktion overlaps aufrufen, um nach Kollisionen zwischen diesen Feldern zu suchen. Der folgende Code liefert ein Beispiel:

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

In diesem Beispiel wird ein rotes Feld mit dem Namen „Red Box“ erstellt und mit der Maus verschoben. Mehrere andere Boxen mit der Bezeichnung „Box 1“ bis „Box 4“ sind an verschiedenen Stellen im Bereich „Bereich“ positioniert. Das jQuery-Skript prüft auf Kollisionen zwischen der „roten Box“ und den anderen Boxen und zeigt die Ergebnisse in einer Reihe von

Elemente.

Durch die Verwendung der Funktion overlaps können Sie die Kollisionserkennung für jQuery

effektiv implementieren. Elemente, die dynamische Interaktionen und Kollisionsbehandlung in Echtzeit in Ihren Webanwendungen ermöglichen.

Das obige ist der detaillierte Inhalt vonWie erkennt man Kollisionen zwischen jQuery-Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery html Boolean if for while using function this position
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie können Sie JavaScript-Variablen über mehrere Webseiten hinweg beibehalten?Nächster Artikel：Wie können Sie JavaScript-Variablen über mehrere Webseiten hinweg beibehalten?

In Verbindung stehende Artikel

Mehr sehen