복붙노트

[JQUERY] jQuery를 / 자바 스크립트 충돌 감지

JQUERY

jQuery를 / 자바 스크립트 충돌 감지

해결법

  1. 1.VAR의 오버랩 = (함수 () { 함수 getPositions (ELEM) { VAR 볼때, 폭, 높이; POS = $ (ELEM) .position (); 폭 = $ (ELEM) .width (); 높이 = $ (ELEM) .height의 (); 창 [pos.left, pos.left 폭 +], [pos.top, pos.top 높이 +]; } 함수 comparePositions (P1, P2) { VAR (R1, R2); R1 = P1 [0] R2 [0] || R1 [0] === R2 [0]; } 창 함수 (a, b) { VAR의 POS1 = getPositions (a) POS2 = getPositions (b); 리턴 comparePositions (POS1 [0], POS2 [0]) && comparePositions (POS1 [1], POS2 [1]); }; }) (); () {(기능 $ VAR 면적 = $ ( '#area') [0], 상자 = $ ( '#의 box0') [0], HTML; HTML = $ (영역) .children (). 없다 (박스) .MAP (기능 (ⅰ) { 창 '

    빨간색 박스 + 박스'+ (I + 1) + '='+ 중복 박스 (이) + ''; .}) ()를 얻을 수 (가입 '.'); $ ( '몸')으로 .Append (HTML) }); 몸 { 패딩 : 30 픽셀; 색상 : # 444; 글꼴 - 가족 : 굴림, 산세 리프; } H1 { 폰트 크기 : 24 픽셀; 마진 - 하단 : 20 픽셀; } #지역 { 국경 : 2 픽셀 고체 회색; 폭 : 500 픽셀; 높이 : 400 픽셀; 위치 : 상대; } #area> DIV { 배경색 : RGBA (122, 122, 122, 0.3); 위치 : 절대; 텍스트 정렬 : 센터; 폰트 크기 : 50 픽셀; 폭 : 60 픽셀; 높이 : 60 픽셀; } # box0 { 배경색! RGBA (255, 0, 0, 0.5) 중요한; 최고 : 150 픽셀; 왼쪽 : 150 픽셀; } # BOX1 { 최고 : 260px; 왼쪽 : 50 픽셀; } # BOX2 { 최고 : 110px; 왼쪽 : 160 픽셀; } # box3 { 최고 : 200 픽셀; 왼쪽 : 200 픽셀; } # box4 { 상단 : 50 픽셀; 왼쪽 : 400 픽셀; } P { 여백 : 5px 0; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">

    스크립트 오버랩 검색
    1
    2
    3
    4

    VAR의 오버랩 = (함수 () { 함수 getPositions (ELEM) { VAR 볼때, 폭, 높이; POS = $ (ELEM) .position (); 폭 = $ (ELEM) .width (); 높이 = $ (ELEM) .height의 (); 창 [pos.left, pos.left 폭 +], [pos.top, pos.top 높이 +]; } 함수 comparePositions (P1, P2) { VAR (R1, R2); R1 = P1 [0] R2 [0] || R1 [0] === R2 [0]; } 창 함수 (a, b) { VAR의 POS1 = getPositions (a) POS2 = getPositions (b); 리턴 comparePositions (POS1 [0], POS2 [0]) && comparePositions (POS1 [1], POS2 [1]); }; }) (); () {(기능 $ VAR 면적 = $ ( '#area') [0], 상자 = $ ( '#의 box0') [0], HTML; HTML = $ (영역) .children (). 없다 (박스) .MAP (기능 (ⅰ) { 창 '

    빨간색 박스 + 박스'+ (I + 1) + '='+ 중복 박스 (이) + ''; .}) ()를 얻을 수 (가입 '.'); $ ( '몸')으로 .Append (HTML) }); 몸 { 패딩 : 30 픽셀; 색상 : # 444; 글꼴 - 가족 : 굴림, 산세 리프; } H1 { 폰트 크기 : 24 픽셀; 마진 - 하단 : 20 픽셀; } #지역 { 국경 : 2 픽셀 고체 회색; 폭 : 500 픽셀; 높이 : 400 픽셀; 위치 : 상대; } #area> DIV { 배경색 : RGBA (122, 122, 122, 0.3); 위치 : 절대; 텍스트 정렬 : 센터; 폰트 크기 : 50 픽셀; 폭 : 60 픽셀; 높이 : 60 픽셀; } # box0 { 배경색! RGBA (255, 0, 0, 0.5) 중요한; 최고 : 150 픽셀; 왼쪽 : 150 픽셀; } # BOX1 { 최고 : 260px; 왼쪽 : 50 픽셀; } # BOX2 { 최고 : 110px; 왼쪽 : 160 픽셀; } # box3 { 최고 : 200 픽셀; 왼쪽 : 200 픽셀; } # box4 { 상단 : 50 픽셀; 왼쪽 : 400 픽셀; } P { 여백 : 5px 0; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">

    스크립트 오버랩 검색
    1
    2
    3
    4

    일반 아이디어 - 당신은 얻을 오프셋과 상자의 치수 여부 그들은을 중복 확인.

    업데이트로하려면 setInterval을 사용할 수 있습니다 :

    function detectOverlapping() {
    // code that detects if the box overlaps with a moving box
    setInterval(detectOverlapping, 25);
}

detectOverlapping();

    또한, 당신이 특정 예제의 기능을 최적화 할 수 있습니다.

  2. 2.나는 이것이 가장 쉬운 방법이라고 생각 : http://plugins.jquery.com/project/collidable

    나는 이것이 가장 쉬운 방법이라고 생각 : http://plugins.jquery.com/project/collidable

    다음은 독일어로 또 다른 하나입니다 : http://www.48design.de/news/2009/11/20/kollisionsabfrage-per-jquery-plugin-update-v11-8/

    나는 그 시도 줘야 할 것.

    --최신 정보--

    난 정말 지금 당장에 언제든지 쓸 수는 없지만, 내가 집에 얻을 수있을 때 경우에 아무 대답하지만, 같은 일을 할 거라고 :

    setInterval(function(){
            //First step would be to get the offset of item 1 and item 2
            //Second would be to get the width of each
            //Third would be to check if the offset+width ever overlaps
                //the offset+width of the 2nd
            //Fourth would be, if so, do X or set a class...
        },10);

  3. 3.그 조금 늦게이에하지만 난 당신이 내가 유사한 상황에 직면 할 때 내가 시도하는 것이이 방법을 사용할 수있는 것 같아요. 여기에 장점이 추가 플러그인없는, 또는 스크립트가 참여하고 둘 다 당신이 그것으로 성능을 배가 폴링을 소개해야 할 것입니다. 이 기술은 사용하는 내장 된 방법과 jQuery의 낙하 할가 제공하는 이벤트.

    그 조금 늦게이에하지만 난 당신이 내가 유사한 상황에 직면 할 때 내가 시도하는 것이이 방법을 사용할 수있는 것 같아요. 여기에 장점이 추가 플러그인없는, 또는 스크립트가 참여하고 둘 다 당신이 그것으로 성능을 배가 폴링을 소개해야 할 것입니다. 이 기술은 사용하는 내장 된 방법과 jQuery의 낙하 할가 제공하는 이벤트.

    좋아, 말했다만큼, 여기에 솔루션 기술이다 : 이 두 가지 요소가 있다면 말 (내 경우에는 이미지) 그리고 당신은 그들이 겹치거나 그들이하는 낙하 할 두 가지 요소를 확인하고 서로 '동의'로해야합니까 때를 감지하지 않으려는 :

    $([div1, div2]).droppable(CONFIG_COLLISSION_PREVENTION_DROPPABLE);

    이 같은 'CONFIG_COLLISSION_PREVENTION_DROPPABLE'외모 :

    var originatingOffset = null;
CONFIG_COLLISSION_PREVENTION_DROPPABLE = {
    tolerance: "touch",
    activate : function (event, ui) {
        // note the initial position/offset when drag starts
        // will be usedful in drop handler to check if the move
        // occurred and in cae overlap occurred, restore the original positions.
        originatingOffset = ui.offset;
    },
    drop : function (event, ui) {
            // If this callback gets invoked, the overlap has occurred. 
            // Use this method to either generate a custom event etc.

            // Here, i used it to nullify the move and resetting the dragged element's 
            // position back to it's original position/offset
            // (which was captured in the 'activate' handler)
        $(ui.draggable).animate({
            top: originatingOffset.top + "px",
            left: originatingOffset.left + "px"
        }, 300);
     }
}

    '활성화'와 '드롭'핸들러는 'dropactivate'과 '낙하 할'플러그인 '드롭'이벤트를 참조

    여기에, 키는 '드롭'콜백입니다. 두 요소 중 하나가 겹쳐 서로를 통해 삭제됩니다 때마다 '드롭'가 호출됩니다. 이 사용자 정의 이벤트를 보내거나 (I가 '활성화'콜백에서 체포됐다 드래그가 시작 초기 위치에 중복 요소의 위치를 ​​복귀하기로 결정했습니다 여기에) 다른 작업을 호출 할 수있다, 감지하고 조치를 취할 수있는 장소입니다.

    이게 다예요. 없음 폴링, 아니 플러그인은 바로 내장하지-의 이벤트.

    음,이 단순히 일을 내 머리 중 첫 번째 사진이고, 다른 최적화 / 그 짓을 확장있을 수 있습니다 :)

    또한 사용할 수있는 'dropover'및 '강하'이벤트 신호가 이동 계속 될 수 있지만, 두 요소가 중첩되어 사용자에게 시각적 피드백을 만드는.

    var CLASS_INVALID = "invalid";
// .invalid { border: 1px solid red; }
...
$.extend(CONFIG_COLLISSION_PREVENTION_DROPPABLE, {
   over : function (event, ui) {
        // When an element is over another, it gets detected here;
        // while it may still be moved.
        // the draggable element becomes 'invalid' and so apply the class here
        $(ui.draggable).addClass(CLASS_INVALID);
    },
    out : function(event, ui) {               
         // the element has exited the overlapped droppable now
         // So element is valid now and so remove the invalid class from it
         $(ui.draggable).removeClass(CLASS_INVALID);
    }
});

    도움이 되었기를 바랍니다!

  4. 4.편집 : 내 웹 사이트에 블로그 게시물을 작성했습니다. 여기에 링크 여기. http://area36.nl/2014/12/creating-your-own-collision-detection-function-in-javascript/

    편집 : 내 웹 사이트에 블로그 게시물을 작성했습니다. 여기에 링크 여기. http://area36.nl/2014/12/creating-your-own-collision-detection-function-in-javascript/

    그럼 저도 같은 문제를 겪고 있지만, 오스카 대자 I의 대답 덕분에 작품이 기능을 얻었다. 나는 쉽게 코딩과 내가 게으른이기 때문에 jQuery를 사용, 페이지를. 나는 두 번째 그래서 명심 모든 해고 된 다른 기능에 기능을 넣어.

    function collidesWith (element1, element2) {
    var Element1 = {};
    var Element2 = {};

    Element1.top = $(element1).offset().top;
    Element1.left = $(element1).offset().left;
    Element1.right = Number($(element1).offset().left) + Number($(element1).width());
    Element1.bottom = Number($(element1).offset().top) + Number($(element1).height());

    Element2.top = $(element2).offset().top;
    Element2.left = $(element2).offset().left;
    Element2.right = Number($(element2).offset().left) + Number($(element2).width());
    Element2.bottom = Number($(element2).offset().top) + Number($(element2).height());

    if (Element1.right > Element2.left && Element1.left < Element2.right && Element1.top < Element2.bottom && Element1.bottom > Element2.top) {
        // Do your stuff here
    }
}

    그것이 무엇을하는 것은에서 element1의 모든 값을 가져온 다음이 element2의 모든 값을 가져 기본적으로. 그런 다음 몇 가지 계산의 도움으로이 모든 값을 파악한다. 그런 다음 if 문에는이 element2의 광장에서 element1의 제곱을 비교합니다. 에서 element1의 숫자는 왼쪽, 오른쪽, 위쪽 및 아래쪽이 element2의 값 사이 인 경우. 그게 사실이라면 아래의 코드가 실행됩니다.

  5. 5.나 자신, 그래서 (전체 공개가) 나는 그것을 위해 플러그인을 만들어이 일반화 된 문제에 달렸다. 정적 객체에 대한 간단한 충돌 쿼리의 경우,이 시도 :

    나 자신, 그래서 (전체 공개가) 나는 그것을 위해 플러그인을 만들어이 일반화 된 문제에 달렸다. 정적 객체에 대한 간단한 충돌 쿼리의 경우,이 시도 :

    http://sourceforge.net/projects/jquerycollision/

    어느 (충돌 존재하지 않는 경우 또는 없음) 당신이 충돌 상자를 중복의 목록을 얻을 수 있습니다 :

    조회수 = $ ( "#의 입자 가속기") 충돌 ( "장애물..");

    또는 "드래그"중 충돌 이벤트를 얻기 위해 이것을 사용 :

    http://sourceforge.net/apps/mediawiki/jquidragcollide/?source=navbar#collision

    어떤 당신에게 연결하는 "충돌"이벤트를 제공합니다. (사업부는 현재를 포함하는 다른 사업부를 탈출하는 경우 아니면 "돌출"이벤트는, 볼 수 있습니다.)

    $(draggable).bind( 
   "collision",
   function(event,ui) {
      ...
   }
);

    당신이 끌어 이외의 동작 중에 충돌을 확인하는 경우, 그냥 꽤 빠르다 반복 원본을 호출합니다. 참고 : 드래그 한 크기 조정과 잘 재생되지 않습니다.

  6. 6.포스트 오래된, 누군가 도움이 될 수 있습니다 ...

    포스트 오래된, 누군가 도움이 될 수 있습니다 ...

    function CheckDiv()
{
var ediv1 = document.getElementById('DIV1');
var ediv2 = document.getElementById('DIV2');

 ediv1.top = $(ediv1).offset().top;
 ediv1.left = $(ediv1).offset().left;
 ediv1.right = Number($(ediv1).offset().left) + Number($(ediv1).width());
 ediv1.bottom = Number($(ediv1).offset().top) + Number($(ediv1).height());

 ediv2.top = $(ediv2).offset().top;
 ediv2.left = $(ediv2).offset().left;
 ediv2.right = Number($(ediv2).offset().left) + Number($(ediv2).width());
 ediv2.bottom = Number($(ediv2).offset().top) + Number($(ediv2).height());

if (ediv1.right > ediv2.left && ediv1.left < ediv2.right && ediv1.top < ediv2.bottom && ediv1.bottom > ediv2.top)
 {
alert("hi");
}

if (ediv1.left > ediv2.left && ediv1.top > ediv2.top && ediv1.right < ediv2.right && ediv1.bottom < ediv2.bottom)
 {
alert("hello");
    }
}

  7. 7.당신은 ()이 사용 getBoundingClientRect을 수행 할 수 있습니다

    당신은 ()이 사용 getBoundingClientRect을 수행 할 수 있습니다

    function isOverlapping(div1, div2){
    const div1 = div1.getBoundingClientRect();
    const div2 = div2.getBoundingClientRect();
    return (div1.right > div2.left && 
            div1.left < div2.right && 
            div1.bottom > div2.top && 
            div1.top < div2.bottom)
}

    8. from https://stackoverflow.com/questions/4230029/jquery-javascript-collision-detection by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 웹 사이트 jQuery를 사용하여와 jQuery를 그리스 몽키 1.0 충돌  (0) 2020.09.28
[JQUERY] 어떻게하여 setInterval 및 위해 clearInterval을 사용 하는가?  (0) 2020.09.28
[JQUERY] jQuery를이 : 동기 AJAX 요청을 수행  (0) 2020.09.28
[JQUERY] [개체 개체] 무엇을 의미합니까?  (0) 2020.09.28
[JQUERY] AJAX, PHP와 jQuery를 사용하여 여러 이미지를 업로드  (0) 2020.09.28
,

티스토리툴바