Question

我正在尝试编写一个代码，这样每当我点击div时，在我点击的鼠标坐标处创建另一个div。这就是我所做的：

new Date('45 12')
"Fri Dec 01 2045"

问题是，当我点击$("#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>'); });的右边框附近时，部分已创建的div会显示在main_div之外。有没有办法让创建的div始终显示在main_div内？

因此，当点击main_div的右边界附近时，创建的div的位置等于x减去某个数量。我不确定这个数量是多少。我希望你理解我的问题。

Answer 1

这样的东西？ https://jsfiddle.net/0tyhb7nx/1/

$("#main_div").mouseup(function (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;
    if (x + 162 > parentWidth)
        x = x - 162;
    if (y + 92 > parentHeight)
        y = y - 92;
    $(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>');
});

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

您必须记住将容器的位置设置为position: relative;

只是为了澄清：
162 = 150（宽度）+ 2 * 5（填充）+ 2 * 1（边框）
92 = 80（高）+ 2 * 5（填充）+ 2 * 1（边框）

您可能最好为所有这些数字使用变量，而不是像这样硬编码。

Answer 2

检查此fiddle。使用bumpy's解决方案。但修改了一下。

<强> 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>');
});

如何在另一个div的边框内完全创建一个div？

2 个答案: