Create a div where I click inside the container

Question

Here is an example of creating a div next to the cursor position on a click: view sample

It creates a div where I click inside the div container, but when clicked too close to the borders, a div is created outside the container. Created divs should be displayed completely inside the container, even if the cursor is too close to the border. What do I need to change or add? :)

Problem - > MyImage is Out of the Box

Goal → Red dots indicate clicks made

Note. I do not need red dots. I just put it there to show that when I click on this place, the result will be 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>

Hide result

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>