如何偵測 jQuery `` 元素之間的衝突？

jQuery Div 元素之間的碰撞檢測

檢測元素之間的碰撞是許多 Web 應用程式中的一項基本任務。在這種情況下，目標是確定是否有兩個特定的

。以彩色框表示的元素在相互垂直移動時發生碰撞。

解決此問題的一種有效方法是利用下面提供的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] );
    };
})();

此函數需要兩個

元素作為參數並傳回一個布林值，指示它們是否根據其位置和尺寸重疊。此函數首先檢索每個元素的位置和大小，然後比較它們沿 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」的紅色框，並使用滑鼠進行移動。標記為「Box 1」到「Box 4」的其他幾個方塊位於「區域」div 中的不同位置。 jQuery 腳本檢查「紅色框」與其他每個框之間的碰撞，並以一系列

形式顯示結果。

利用overlaps函數，可以有效實現jQuery

元素的碰撞偵測。元素，在您的 Web 應用程式中實現動態互動和即時碰撞處理。

以上是如何偵測 jQuery `` 元素之間的衝突？的詳細內容。更多資訊請關注PHP中文網其他相關文章！