Question

我有一个主div，我试图在鼠标点击时捕获的坐标上显示另一个小div。问题是，当我点击最左边，右边，顶部，底部时，小div正在主div之外。我在主要div上尝试了overflow:hidden，但我不想这样做。无论我点击哪里，我都希望div位于主div内。示例代码：

$(document).ready(function() {
    $("#main_div").bind('click', function(event){

    var x = event.pageX-document.getElementById("main_div").scrollLeft;
    var y = event.pageY-document.getElementById("main_div").scrollTop;



    $("#container-5").css({"top":y,"left":x});
   });

Answer 1

您可以检查点击的坐标是否会将小div的一部分放在主div之外，如果是这样，则更改坐标以使小div保留在主div内。（见jsFiddle。）

$(document).ready(function() {
    $("#main_div").bind('click', function(event) {
        var $mainDiv = $("#main_div");
        var $container5 = $("#container-5");

        var x = event.pageX - $mainDiv.position().left;
        var y = event.pageY - $mainDiv.position().top;

        if (x + $container5.width() > $mainDiv.width()) {
            x = $mainDiv.width() - $container5.width();
        }
        if (y + $container5.height() > $mainDiv.height()) {
            y = $mainDiv.height() - $container5.height();
        }

        $container5.css({
            "top": y,
            "left": x
        });
    });
});

将div放在页面外的捕获坐标上

1 个答案: