title: Draggable text box scales more than expected
body: <p>I made a text box and boxes on the corners for resizing. The first time I drag, it works perfectly fine, but after the 1st time, the dragging amount seems to multiply. (Don't mind the position of the dragging nodes). If you drag once, it scales fine with the mouse. It seems as if every time after that, when you drag, it scales farther and farther from the user's mouse, causing an 'uncontrollable' scale. I reset the values of the prevX and prevY values at the end of the move function. I'm not sure if that's the issue though. The issue, I believe, is with the scaling with getBoundingClientRect() in the resize portion. Moving the textbox, however, works perfectly fine. Here is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var textBox = document.querySelector(".text-box");
              var textArea = document.querySelector('.text-field');
              textArea.focused = false;
  
              textBox.addEventListener('mousedown', mousedown);
  
              let isResizing = false;
              let isTyping = false;
  
              textArea.addEventListener('dblclick', type)
              function type(){
                  if (!isTyping){
                      isTyping = true;
                      textArea.style.cursor = 'text';
                  }else {
                      isTyping = false;
                      textArea.style.cursor = 'default';
                  }
              }
  
              document.body.onclick = function(e){
                  if (e.target != textArea){
                  isTyping = false;
                  e.target.style.cursor = 'default';
                  }
              }
  
              function mousedown(e){
                  if (e.target == textArea){
                      e.target.style.cursor = 'default';
                  }
  
                  window.addEventListener('mousemove', mousemove);
                  window.addEventListener('mouseup', mouseup);
  
                  let prevX = e.clientX;
                  let prevY = e.clientY;
  
                  function mousemove(e){
                      if(!isResizing &amp;&amp; !isTyping){
                      let newX = prevX - e.clientX;
                      let newY = prevY - e.clientY;
  
                      const rect = textBox.getBoundingClientRect();
  
                      textBox.style.left = rect.left - newX + "px";
                      textBox.style.top = rect.top - newY + "px";
  
                      prevX = e.clientX;
                      prevY = e.clientY;
                  }
                  }
                  function mouseup(){
                      window.removeEventListener('mousemove', mousemove);
                      window.removeEventListener('mouseup', mouseup);
                  }
  
                  const handles = document.querySelectorAll('.handle');
                  let currentHandle;
  
                  for(let handle of handles){
                      handle.addEventListener('mousedown', mousedown);
  
                      function mousedown(e){
                          currentHandle = e.target;
                          isResizing = true;
  
                          let prevX = e.clientX;
                          let prevY = e.clientY;
  
                          window.addEventListener('mousemove', mousemove);
                          window.addEventListener('mouseup', mouseup);
  
                          function mousemove(e){
                              const rect = textBox.getBoundingClientRect();
  
                              if (currentHandle.classList.contains("se")) {
                                  textBox.style.width = rect.width - (prevX - e.clientX) + "px";
                                  textBox.style.height = rect.height - (prevY - e.clientY) + "px";
                              } else if (currentHandle.classList.contains("sw")) {
                                  textBox.style.width = rect.width + (prevX - e.clientX) + "px";
                                  textBox.style.height = rect.height - (prevY - e.clientY) + "px";
                                  textBox.style.left = rect.left - (prevX - e.clientX) + "px";
                              } else if (currentHandle.classList.contains("ne")) {
                                  textBox.style.width = rect.width - (prevX - e.clientX) + "px";
                                  textBox.style.height = rect.height + (prevY - e.clientY) + "px";
                                  textBox.style.top = rect.top - (prevY - e.clientY) + "px";
                              } else {
                                  textBox.style.width = rect.width + (prevX - e.clientX) + "px";
                                  textBox.style.height = rect.height + (prevY - e.clientY) + "px";
                                  textBox.style.top = rect.top - (prevY - e.clientY) + "px";
                                  textBox.style.left = rect.left - (prevX - e.clientX) + "px";
                              }
                              prevX = e.clientX;
                              prevY = e.clientY;
                          }
  
                          function mouseup(){
                              window.removeEventListener('mousemove', mousemove);
                              window.removeEventListener('mouseup', mouseup);
                              textArea.focused = false;
                              isResizing = false;
  
                          }
                      }
                  }
              }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.text-box{
              height: 50px;
              width: 150px;
              position: absolute;
          }
          .handle{
              position: absolute;
              width: 5px;
              height: 5px;
              background-color: blue;
              z-index: 2;
          }
          .ne{
              top: -1px;
              right: -1px;
              cursor: ne-resize;
          }
          .nw{
              top: -1px;
              left: -1px;
              cursor: nw-resize;
          }
          .sw{
              bottom: -1px;
              left: -1px;
              cursor: sw-resize;
          }
          .se{
              bottom: -1px;
              right: -1px;
              cursor: se-resize;
          }
          .text-field {
              width: 100%;
              height: 100%;
              resize: none;
              cursor: default;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="text-box"&gt;
          &lt;textarea class="text-field"&gt;Click to add text...&lt;/textarea&gt;
          &lt;div class="handle ne"&gt;&lt;/div&gt;
          &lt;div class="handle nw"&gt;&lt;/div&gt;
          &lt;div class="handle sw"&gt;&lt;/div&gt;
          &lt;div class="handle se"&gt;&lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>