Javascript 如何在另一个div的边界内创建一个div？

我试图编写一个代码，这样每当我单击一个div时，就会在它内部的鼠标坐标处创建另一个div。这就是我所做的：

$("#main_div").mouseup(function (e){
   var parentOffset = $(this).offset();
    var x = e.pageX - parentOffset.left;
    var y = e.pageY - parentOffset.top;
    $(this).prepend('<div style="position:absolute;width:150px;height:80px;background-color:#FFF19A;border:1px solid #eee;padding:5px;left:'+x+'px;top:'+y+'px;padding:5px;"></div>');
});

$（“#main_div”）.mouseup（函数（e）{
var parentOffset=$（this.offset（）；
var x=e.pageX-parentOffset.left；
var y=e.pageY-parentOffset.top；
$（this.prepend（“”）；
});

问题是，一旦我在

main\u div

的右边框附近单击，创建的div的一部分就会显示在

main\u div

之外。有没有办法使创建的div始终显示在

main\u div

中

因此，当单击

main_div

的右边框附近时，创建的div的左位置等于x减去一些数量。我不确定这个数量是多少。我希望你能理解我的问题

像这样的

$（“#main_div”）.mouseup（函数（e）{
var parentOffset=$（this.offset（）；
var parentWidth=$（this.width（）；
var parentHeight=$（this.height（）；
var x=e.pageX-parentOffset.left；
var y=e.pageY-parentOffset.top；
如果（x+162>parentWidth）
x=x-162；
如果（y+92>parentHeight）
y=y-92；
$（this.prepend（“”）；
});

此解决方案还考虑了容器的位置，因此可以自由移动容器

您必须记住将容器的位置设置为

position:relative

仅供澄清：

162=150（宽度）+2*5（填充）+2*1（边框）

92=80（高度）+2*5（填充）+2*1（边框）

您最好对所有这些数字使用变量，而不是像这样硬编码。
检查此项。使用溶液。
但是稍微修改了一下

JS

$("#main_div").mouseup(function (e) {
    var parentOffset = $(this).offset();
    var parentWidth = $(this).width();
    var parentHeight = $(this).height();
    var x = e.pageX - parentOffset.left + 10;
    var y = e.pageY - parentOffset.top + 10;
    if (x + 150 > parentOffset.left + parentWidth) x = x - 170;
    if (y + 80 > parentOffset.top + parentHeight) y = y - 100;
    $(this).prepend('<div style="position:absolute;width:150px;height:80px;background-color:#FFF19A;border:1px solid #eee;padding:5px;left:' + x + 'px;top:' + y + 'px;padding:5px;"></div>');
});

$（“#main_div”）.mouseup（函数（e）{
var parentOffset=$（this.offset（）；
var parentWidth=$（this.width（）；
var parentHeight=$（this.height（）；
var x=e.pageX-parentOffset.left+10；
变量y=e.pageY-parentOffset.top+10；
如果（x+150>parentOffset.left+parentWidth）x=x-170；
如果（y+80>parentOffset.top+parentHeight）y=y-100；
$（this.prepend（“”）；
});
是这样的：？不，因为这也有同样的问题。如果在右边框附近单击，则创建的div的一部分将显示在外部。
$("#main_div").mouseup(function (e) {
    var parentOffset = $(this).offset();
    var parentWidth = $(this).width();
    var parentHeight = $(this).height();
    var x = e.pageX - parentOffset.left + 10;
    var y = e.pageY - parentOffset.top + 10;
    if (x + 150 > parentOffset.left + parentWidth) x = x - 170;
    if (y + 80 > parentOffset.top + parentHeight) y = y - 100;
    $(this).prepend('<div style="position:absolute;width:150px;height:80px;background-color:#FFF19A;border:1px solid #eee;padding:5px;left:' + x + 'px;top:' + y + 'px;padding:5px;"></div>');
});