Question

这是在点击时在光标位置旁边创建div的示例： view sample

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

问题 - ＆gt; MyImage goes beyond the border

目标 - ＆gt; Red dots indicate the clicks done

注意：我不需要红点。我只是把它放在那里，以显示当我点击该点时，结果将是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>

Answer 2

问题是，你使用绝对位置，新的div不知道你的盒子的宽度。

要解决此问题，您应该获得文本包装器的宽度。和你的盒子的宽度。

将此值存储为max x，也许您对y执行相同操作。

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


            div.append(img);
            $(document.body).append(div);

            var imgHeight = img.outerHeight();
            if ((y + imgHeight) > yMax) {
                div.css('top', yMax - imgHeight);
            }

            var imgWidth = img.outerWidth();
            if ((x + imgWidth) > xMax) {
                div.css('left', yMax - imgWidth);
            }
          });
        });

这个例子适合我。文本始终在框中。我希望它有所帮助。：）

Answer 3

结帐：https://jsfiddle.net/bupwhfby/

JS：

contain.onclick = function(e){

   var div = document.createElement('div');

   div.style.position = 'absolute';
   div.style.top      = e.clientY + 'px';
   div.style.left     = e.clientX + 'px';

   div.innerHTML = 'Hello World'

   this.appendChild(div);

}

CSS：

html,body,#contain{width:100%;height:100%;}

HTML：

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

创建div，我在容器中单击

3 个答案: