如何使用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

这不是一个完整的解决方案，但是您可以使用$（“ selector”）。offset（）。left或top和$（“ selector”）。width（）或height构造两个矩形，检查一个矩形是否不在另一个矩形内，然后按指示行动。

Answer 2

这里的逻辑是检查新的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 });

}); 

Answer 3

我在考虑以下方面：

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

Y也一样。当然，如果表实际上小于div，那可能会使事情变得混乱。

Answer 4

我可能是错的，但是您想创建某种工具提示功能吗？ 如果是这样，请查看http://flowplayer.org/tools/tooltip/index.html