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

时间:2015-08-20 10:00:25

标签: javascript jquery css

我正在尝试编写一个代码,这样每当我点击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减去某个数量。我不确定这个数量是多少。我希望你理解我的问题。

2 个答案:

答案 0 :(得分: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(边框)

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

答案 1 :(得分:0)

检查此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>');
});