Jquery를 사용하여 아래 테이블 외부에서 DIV 디스플레이를 중지하려면 어떻게해야합니까?

Question

셀을 클릭하면 & 테이블이 있는데, 절대 위치 지정을 사용하여 DIV (마우스 오른쪽에)를 표시합니다.

마이너스 좌표 (위치 지정)를 사용하여 DIV를 표시하기 때문에 테이블 외부에 표시되지 않습니다 ('# holiday-planner-table'). .. 여기

내가 생각하고 개념입니다 :) (오프셋

if($('#DayInfo'). is outside of $('#holiday-planner-table')) { 

    display $('#DayInfo') with minus co-ordinates 
    } else 
{ 

     $(".WeekDay").click(function(event) { 
      $("#DayInfo").css({position:"absolute", top:event.pageY, left: event.pageX}); 

    }); 
} 

Answer 1

그것은 완전한 해결책은 아니지만 당신이 $ ("선택")를 사용하여 왼쪽 또는 상단과 $ ("선택") .width() 또는 height를 사용하여 두 개의 사각형을 구성하고, 하나가 다른 사각형 내부에 있지 않은지 확인하고 그에 따라 작동하십시오.

Answer 2

내가의 라인 사이에 뭔가 생각 해요 :

if (mousex > (tablew-divw)) divx = mousex-divw 
else divx=mousex 

같은 일이 물론 Y. , 간다 그 수 엉망 물건까지 테이블이 실제로 DIV보다 작게 될 경우.

Answer 3

내가 틀릴 수도 있지만 툴팁 기능을 만들고 싶습니까? 그렇다면, http://flowplayer.org/tools/tooltip/index.html

Answer 4

여기서 논리는 새로운 div 좌표가 div 위치 + 크기를 테이블 위치 + 크기 이외의 값으로 놓는 지 확인하는 것입니다. 그렇다면 div 좌표를 div의 크기로 되돌려 놓습니다. 당신은 독립적으로 왼쪽과 위로 할 수 있습니다.

이 아주 가까이 당신을 얻을해야합니다

$(".WeekDay").click(function (e) { 

    var x = e.pageX; 
    var y = e.pageY; 
    var $div = $('#DayInfo'); 
    var $table = $('#holiday-planner-table'); 

    if (x + $div.width() > $table.offset().left + $table.width()) { 

     x -= $div.width(); 
    } 

    if (y + $div.height() > $table.offset().top + $table.height()) { 

     y -= $div.height(); 
    } 

    $div.css({ position: "absolute", top: y, left: x }); 

});