0

マウスのクリックでキャプチャされた座標に別の小さな div を表示しようとしている Main 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});
   });
4

1 に答える 1

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
        });
    });
});​
于 2012-10-20T08:19:41.923 に答える