div 선택기의 jquery inverse

Question

사용자가 행을 선택하고 jquery 그리드 외부에 놓을 때 이벤트를 가져 오려고합니다. 이 드래그/드롭에 대한 드롭 기능이 완벽하게 잘 작동하는 그리드 내에서 어떻게됩니까입니다 - 나는 그리드 캔버스 DIV 밖에 "ANYWHERE"일어나는 드래그 & 드롭을 추적하기 위해 노력하고있어

$(".grid-canvas") 
     .on("drop", function (e, dd) { 
       // somecode 
        }); 

. 하지만 역 선택은 효과가없는 것처럼 보입니다. 나는이 시도했지만 작동하지 않습니다 -

$(".grid-canvas") 
    .not(this) 
    .on("drop", function (e, dd) { 
    alert("outside"); 
}); 

내가 이것을 시도하지만, 그것은뿐만 아니라 그리드 내에서 드래그를 위해 & 방울을 트리거 -

$(":not(.grid-canvas)") 
           .on("drop", function (e, dd) { 
           alert("outside"); 
          }); 

감사 어떤 도움. 감사.

Answer 1

대상 문서의 모든 방울을 얻을, 다음 단지 (의사 선택기보다 아마 더 효율적) .grid-canvas 안에 자신을 중첩되어 아무것도 걸러 직접 : 모든

$(document).on('drop', function(e, dd) { 
    if (! $(e.target).closest('.grid-canvas').length) { 
     // dropped outside 
    } 
}); 

Answer 2

먼저, 위로 읽어 " on "문서를 참조하십시오. 두 번째 예는 다음과 같습니다.

Select all elements with the "grid-canvas" class 
    ...that aren't `this` 
    ...and watch for drop events on them, and do this when they happen 

분명히 원하는 것은 없습니다. 두 번째는 가까이 :

가까운하지만) 이벤트 리스너 정말 나쁜 생각이다 페이지, 거의 모든 단일 요소를 추가하고, b)는 여전히 요소에 대해 실행됩니다 내부을

Select all elements that don't have a grid-canvas class 
    ...and watch for drop events on them, and do this when they happen 

당신의 그리드 캔버스 div, 당신이보고있는 것입니다.

당신이 아마하고 싶은 것은 이것이다 :

Select a high-level element (e.g. `body`) 
    ...listen for a drop event, and check if the drop event happened on .grid-canvas or one of its children 

과 같이 보일 것이다 : 대상이 .grid 캔버스 내에있는 경우

$('body').on('drop', function(evt) { 
    //Check if the element dropped on has a .grid-canvas as a parent 
    if($(evt.target).parents('.grid-canvas').length == 0) { 
    alert('Outside'); 
    } 
} 

는, 검사 방법에는 여러 가지가 있습니다를 제가 사용한 것은 단지 예일뿐입니다. 예를 들어 $('.grid-canvas').has(evt.target)을 수행 할 수도 있습니다. 다른 방향에서 시도해보십시오. 생각해 보면 더 이해할 수 있습니다.

하지만 전반적으로 : jQuery는 영어가 아니며 단지 의 소리 인과 같은 문자열을 사용자가 원하는대로 처리 할 수는 없습니다. 사용중인 함수를 읽고 그 함수가 무엇인지 이해하면 jQuery 기술을 훨씬 빨리 빌드 할 수 있습니다.