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

Question

我有一个主div，在里面我试图在鼠标点击时捕获的坐标上显示另一个小div。问题是，当我点击最左边、最右边、最上面、最下面的时候，小的div会移到主div之外。我已经在main 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
        });
    });
});​