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
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
Um die Verwendung dieser Funktion zu demonstrieren, können Sie einen Satz von
$(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
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!
