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

Question

我有一个主 div，我试图在鼠标单击时捕获的坐标上显示另一个小 div。问题是当我点击最左、最右、最上、最底部时，小 div 超出了主 div。我已经尝试过overflow:hidden主 div，但我不想要那样。无论我点击哪里，我都希望 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
        });
    });
});​