title: How do I prevent my window/client to go beyond the websites boders
body: <p>I have experienced a problem where the <strong>client crosses the websites boders</strong>.</p>
  <p>Here is the video.</p>
  <p><img src="https://i.stack.imgur.com/qWdeF.gif" alt="1" /></p>
  <p>Here is the JS code for the element:</p>
  <pre><code>function elementDrag(e) {
      e = e || window.event;
      if (e.cancelable) { e.preventDefault(); }
  
      if(e.touches){
        var clientX = e.touches[0].pageX;
        var clientY = e.touches[0].pageY;
      } else {
        var clientX = e.clientX;
        var clientY = e.clientY;
      }
      // calculate the new cursor position:
      pos1 = pos3 - clientX;
      pos2 = pos4 - clientY;
      pos3 = clientX;
      pos4 = clientY;
  
      var posY = (elmnt.offsetTop - pos2  &gt;= 28) ? elmnt.offsetTop - pos2 : 28;
      var posX = (elmnt.offsetLeft - pos1 &gt;= 0) ? elmnt.offsetLeft - pos1 : 0;
      // set the element's new position:
      elmnt.style.top = posY + &quot;px&quot;;
      elmnt.style.left = posX + &quot;px&quot;;
    }
  </code></pre>
  <p>How do i <strong>prevent this from happening?</strong></p>
  <p>Btw. the window/client can be changed in width and height in the website.</p>
  <p><img src="https://i.stack.imgur.com/00Scm.gif" alt="2" /></p>