Cómo limitar el arrastre dentro del cuerpo. ¿Puede alguien ayudarme a resolver mi código? ¿Dónde debo estar en la contención (AYUDA ~)

Esta es mi encoding que se puede arrastrar. Necesito hacer la que se puede arrastrar solo en el cuerpo. ¿Alguien puede ayudarme a resolver con mi encoding? Necesito ayuda (de principiante)

Sólo sé que tengo que agregar la contención, pero realmente no sé dónde agregarla dentro del código. ¿Puede alguien ayudarme a resolver el código? Gracias.

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; } 
   
Chat