jQuery`` 요소 간의 충돌을 어떻게 감지합니까?-JS 튜토리얼-php.cn

How do you detect collisions between jQuery `` elements?

jQuery Div 요소 간 충돌 감지

요소 간 충돌 감지는 많은 웹 애플리케이션에서 기본적인 작업입니다. 이 경우 목표는 두 개의 특정

색상 상자로 표시된 요소가 서로 수직으로 이동하면서 충돌했습니다.

이 문제를 해결하는 효과적인 접근 방식 중 하나는 아래 제공된 겹침 기능을 활용하는 것입니다.

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"까지 레이블이 지정된 여러 다른 상자는 "area" div의 다른 위치에 배치됩니다. jQuery 스크립트는 "빨간색 상자"와 다른 각 상자 사이의 충돌을 확인하고 결과를 일련의

overlaps 기능을 활용하면 jQuery

에 대한 충돌 감지를 효과적으로 구현할 수 있습니다. 요소를 사용하여 웹 애플리케이션에서 동적 상호 작용과 실시간 충돌 처리를 가능하게 합니다.

위 내용은 jQuery`` 요소 간의 충돌을 어떻게 감지합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

이전 기사：여러 웹 페이지에서 JavaScript 변수를 어떻게 보존할 수 있습니까? 다음 기사：Express App에서 미들웨어로 express-validator를 사용하는 방법

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

에서 2024-04-29 11:01:01

2679

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

2813