How to limit the dragable within the body. Can som

Question

This is my draggable coding I need to do the draggable only in the body. Can someone help me to solve with my coding? I need help(from beginner learning)

I am just know have to add the containment but I really dont know where to add it inside the code. Can someone help me to solve the code? Thank.

Javascript

//Make the DIV element draggagle:
dragElement(document.getElementById(("mydiv")));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }
  
  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

#header-maximize-title
{
	float:left;
	margin-left:10px;
}

#mydivheader
{
	height:40px;
	width:300px;
}

#header-chat
{
	float:left;
  padding:0px 0px 7px 2px;
}

#minimize,#pop-out,#close
{
	width:10px;
	margin:5px;
	float:left;
}

#minimize
{
	margin-left:192px;
}

#divData
{
  width:300px;
  height:200px;
  overflow:auto;
  border-bottom:1px solid #d3d3d3;
  background-color:white;
}

#mydiv 
{
    position: absolute;
    z-index: 999;
    border: 1px solid #d3d3d3;
}

#mydivheader 
{
    padding: 7px;
    cursor: move;
    z-index: 10;
    background-color: #2196F3;
    color: #fff;
}

#bottom-chat
{
	background-color:white;
}

#comment
{
	float:left;
	resize:none;
	border:none;
}

#comment:focus
{
	outline:0;
}

#rating img
{
	width:15px;
	margin:3px;
	float:left;
}

#optionContainer
{
	clear:both;
}

#optionContainer img
{
	cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js" integrity="sha256-eEa1kEtgK9ZL6h60VXwDsJ2rxYCwfxi40VZ9E0XwoEA=" crossorigin="anonymous" ></script>
<div id="mydiv">
  <!--Include a header DIV with the same name as the draggable DIV, followed by "header":-->
  <div id="mydivheader">
  <span id="header-chat">Chat</span>
  <span id="header-icon">
  <a href="#"><img id="minimize" src="images/down-arrow.png" /></a>
  <a href="#"><img id="pop-out" src="images/pop-out.png" /></a>
  <a href="#"><img id="close" src="images/close.png" /></a>
  </span>
  </div>
	<div id="divData">
	
	</div>
	<div id="bottom-chat">
	<textarea id="comment" cols="30" rows="3" placeholder="Type here and press enter.."></textarea>
	<span id="rating">
	<a href="#"><img src="images/like.png" /></a>
	<img src="images/unlike.png" />
	<img src="images/emoji.png" />
	</span>
	<div id="optionContainer">
		<img src="images/attachment.png" id="upfile1" style="cursor:pointer;"  />
		<input type="file" id="file1" accept="*" multiple style="display:none" />
	</div>
	</div>
</div>