Someone help me, I wanted to make my div not leave the screen!

Question

Good morning, so I made my div draggable/Moveable, but I wanted her not to be able to leave the screen, I wanted her to have a limit when I move. Can someone help me? Thanks in advance

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

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;
    e.preventDefault();
    // 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;
    e.preventDefault();
    // 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;
      
  }
}

#ajuda {
    width: 350px;
    height: 500px;
    background-color: red;
    position: absolute;
    z-index: 99999;
    right: 20px;
    top: 10%;
    cursor: all-scroll;
    box-shadow: 2px 2px 10px gray;
   
}

.ajudaTitulo {
    background-color: #1ab3ff;
    height: 60px;
    width: 335px;
    font-family: Arial;
    font-size: 30px;
    color: white;
    position: absolute;
    padding-top: 10px;
    padding-left: 15px;
}

.fecharAjuda {
    position: absolute;
    top: 0px;
    transition: all .4s;
    left: 92%;
    font-size: 35px;
    cursor: pointer;
}

.fecharAjuda:hover {
    color: #777;
}

.ajudaConteudo {
    background-color: white;
    height: 440px;
    position: absolute;
    margin-top: 60px;
    width: 350px;
    overflow-y: scroll;
    cursor: auto;
    overflow-x: hidden;
}

.ajudaConteudo::-webkit-scrollbar-track {
    background-color: white;
    height: 10px;
}

.ajudaConteudo::-webkit-scrollbar {
    background: white;
    width: 12px;
}

.ajudaConteudo::-webkit-scrollbar-thumb {
    background-color: #dcdcdc;
}

.ajudinha {
    background-color: white;
    margin-left: 8px;
    margin-right: 8px;
    box-shadow: 1px 1px 7px grey;
    margin-top: 10px;
    height: 80px;
}

.ajudinha h1 {
    color: gray;
    font-weight: 600;
    word-break: break-all;
    font-size: 16px;
    text-align: center;
}

.ajudinha p {
    padding-top: 5px;
    color: gray;
    padding-left: 10px;
    padding-right: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div id="ajuda" draggable="true" ondragstart="drag_start(event)">
    <div class="ajudaTitulo">
        Ajuda
        <div class="fecharAjuda">x</div>
    </div>
    <div class="ajudaConteudo">
        <div class="ajudinha">
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>
        <div class="ajudinha">
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>
        <div class="ajudinha">
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>
        <div class="ajudinha">
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>
        <div class="ajudinha">
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>
        <div class="ajudinha">
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>

    </div>
</div>

Answer 1

Checking the position of the element and its dimensions (width and height) you can reposition it if it exceeds window limits (see explanations in code):

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

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;
    e.preventDefault();
    // 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;
    e.preventDefault();
    // 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";


    // CÓDIGO (início)
    var ww = window.innerWidth; // largura da janela
    var wh = window.innerHeight; // altura da janela
    var ew = elmnt.offsetWidth; // largura do elemento
    var eh = elmnt.offsetHeight; // altura do elemento

     // se a posição for maior ou igual do que a largura da tela menos a largura do elemento
    if(elmnt.offsetLeft - pos1 >= ww-ew){
        elmnt.style.left = ww-ew +"px";
    }

     // se a posição for maior ou igual do que a altura da tela menos a altura do elemento
    if(elmnt.offsetTop - pos2 >= wh-eh){
        elmnt.style.top = wh-eh +"px";
    }

    // se a posição for menor ou igual que zero ao topo
    // ou a altura do elemento for maior que a altura da janela
    if(elmnt.offsetTop - pos2 <= 0 || eh >= wh){
        elmnt.style.top = "0";
    }

    // se a posição for menor ou igual que zero para a esquerda
    // ou a largura do elemento for maior que a largura da janela
    if(elmnt.offsetLeft - pos1 <= 0 || ew >= ww){
        elmnt.style.left = "0";
    }
    // CÓDIGO (fim)
     
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
      
  }
}

#ajuda {
    width: 350px;
    height: 500px;
    background-color: red;
    position: absolute;
    z-index: 99999;
    right: 20px;
    top: 10%;
    cursor: all-scroll;
    box-shadow: 2px 2px 10px gray;
   
}

.ajudaTitulo {
    background-color: #1ab3ff;
    height: 60px;
    width: 335px;
    font-family: Arial;
    font-size: 30px;
    color: white;
    position: absolute;
    padding-top: 10px;
    padding-left: 15px;
}

.fecharAjuda {
    position: absolute;
    top: 0px;
    transition: all .4s;
    left: 92%;
    font-size: 35px;
    cursor: pointer;
}

.fecharAjuda:hover {
    color: #777;
}

.ajudaConteudo {
    background-color: white;
    height: 440px;
    position: absolute;
    margin-top: 60px;
    width: 350px;
    overflow-y: scroll;
    cursor: auto;
    overflow-x: hidden;
}

.ajudaConteudo::-webkit-scrollbar-track {
    background-color: white;
    height: 10px;
}

.ajudaConteudo::-webkit-scrollbar {
    background: white;
    width: 12px;
}

.ajudaConteudo::-webkit-scrollbar-thumb {
    background-color: #dcdcdc;
}

.ajudinha {
    background-color: white;
    margin-left: 8px;
    margin-right: 8px;
    box-shadow: 1px 1px 7px grey;
    margin-top: 10px;
    height: 80px;
}

.ajudinha h1 {
    color: gray;
    font-weight: 600;
    word-break: break-all;
    font-size: 16px;
    text-align: center;
}

.ajudinha p {
    padding-top: 5px;
    color: gray;
    padding-left: 10px;
    padding-right: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div id="ajuda" draggable="true" ondragstart="drag_start(event)">
    <div class="ajudaTitulo">
        Ajuda
        <div class="fecharAjuda">x</div>
    </div>
    <div class="ajudaConteudo">
        <div class="ajudinha">
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>
        <div class="ajudinha">
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>
        <div class="ajudinha">
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>
        <div class="ajudinha">
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>
        <div class="ajudinha">
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>
        <div class="ajudinha">
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>

    </div>
</div>