jQuery `` 要素間の衝突をどのように検出しますか?-jsチュートリアル-php.cn

jQuery `` 要素間の衝突をどのように検出しますか?

Mary-Kate Olsen

リリース： 2024-11-12 17:26:02

オリジナル

991 人が閲覧しました

How do you detect collisions between jQuery `` elements?

jQuery Div 要素間の衝突検出

要素間の衝突の検出は、多くの Web アプリケーションにおける基本的なタスクです。この場合の目的は、2 つの特定の

が一致するかどうかを判断することです。色付きのボックスで表される要素は、互いに垂直に移動しているときに衝突しました。

この問題に取り組むための効果的なアプローチの 1 つは、以下に提供されている overlaps 関数を活用することです。

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

ログイン後にコピー

この関数は 2 つの

を受け取ります。要素をパラメータとして取得し、位置と寸法に基づいて要素が重なっているかどうかを示すブール値を返します。この関数はまず各要素の位置とサイズを取得し、次にその範囲を x 軸と y 軸に沿って比較します。どちらかの方向に重複がある場合は true を返します。

この関数の使用法を示すために、

のセットを作成できます。 HTML ドキュメント内の要素をボックスとしてスタイル設定し、識別のために一意の ID を割り当てます。次に、jQuery スクリプト内で overlaps 関数を呼び出して、これらのボックス間の衝突をチェックできます。次のコードは例を示しています。

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

ログイン後にコピー

この例では、「Red box」という名前の赤いボックスが作成され、マウスを使用して移動されます。「ボックス 1」から「ボックス 4」というラベルが付いた他のいくつかのボックスは、「エリア」div の異なる場所に配置されています。 jQuery スクリプトは、「赤いボックス」と他の各ボックスの間の衝突をチェックし、結果を一連の

に表示します。

overlaps 関数を利用すると、jQuery

の衝突検出を効果的に実装できます。要素を使用して、Web アプリケーションでの動的な対話とリアルタイムの衝突処理を可能にします。

以上がjQuery `` 要素間の衝突をどのように検出しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。