Question

我有一张桌子和一张桌子。当我单击一个单元格时，它会以绝对定位显示DIV（鼠标右侧）。

我希望DIV使用减去co-ords（定位）来显示，因此它永远不会显示在表格之外（'＃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

如何使用Jquery在其下方的表格外停止DIV显示？

4 个答案: