创建div,我在容器中单击

Question

以下是在click:view sample上创建光标位置旁边的div的 示例

它会创建一个div,我在容器div中单击,但是点击太靠近边框会在容器之外创建一个div.即使光标太靠近边框,创建的Div也应完全出现在容器内.我需要更改或添加什么？:)

问题 - > MyImage超越边界

目标 - > 红点表示完成的点击次数

注意:我不需要红点.我只是把它放在那里,以显示当我点击那个点时,结果将是imagediv

HTML:

<div id="contain">
</div>

JavaScript的:

$(function() {


$("#contain").click(function(e) {
    var x = e.pageX + 'px';
    var y = e.pageY + 'px';
    var img = $('<img src="" alt="myimage" />');
    var div = $('<div>').css({
      "position": "absolute",
      "left": x,
      "top": y
    });
    div.append(img);
    $(document.body).append(div);
  });
});

CSS:

#contain{
  height:300px;
  width:300px;
  border: 1px solid black;
}

Answer 1

首先，您必须将 div 附加到容器中，而不是正文中。之后将position容器的relative.

溢出只有两种情况：容器的溢出right和容器的溢出。bottom所以你只需检查position点击的值是否高于图像的position+ 值。size

例子

$(function() {
  $("#contain").click(function(e) {
    var x = e.pageX + 'px';
    var y = e.pageY + 'px';
    var img = $('<img src="" alt="myimage" />');
    var imgwidth = 68; //Here your image width
    var imgheight = 28; // Here your image height
    if((e.pageX+imgwidth)> ($(this).position().left + $(this).width()))
      x=($(this).position().left + $(this).width())-imgwidth +"px";
    if((e.pageY+imgheight)> ($(this).position().top + $(this).height()))
      y=($(this).position().top + $(this).height())-imgheight+"px";
    var div = $('<div class="content">').css({
      "position": "absolute",
      "left": x,
      "top": y
    });
    div.append(img);
    $(this).append(div);
  });
});

#contain{
  height:300px;
  width:300px;
  border: 1px solid black;
  position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contain">

</div>