Resize by harrystevens

index.html

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      width: 960px;
      height: 500px;
      outline: 1px solid gray;
    }
    #box-1 {
      width: 300px;
      height: 150px;
      left: 300px;
      top: 125px;
      background: steelblue;
    }
    #box-2 {
      width: 150px;
      height: 300px;
      left: 375px;
      top: 100px;
      background: tomato; 
    }
    .box {
      opacity: .8;
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <div id="box-1" class="box"></div>
  <div id="box-2" class="box"></div>
  <script src="resize.js"></script>
  <script>
    resize("#box-1");
    resize("#box-2");
  </script>
</body>
</html>

resize.js

function resize(selector){
  var element = document.querySelector(selector);
  element.style.position = "absolute";
  var d = 8; // distance from cursor to border to active resizing
  var rect = element.getBoundingClientRect();
  var rectLeft = rect.x || rect.left;
  var rectWidth = rect.width;
  var rectRight = rectLeft + rectWidth;
  var rectTop = rect.y || rect.top;
  var rectHeight = rect.height;
  var rectBottom = rectTop + rectHeight;

  var isLeft = false;
  var isRight = false;
  var isTop = false;
  var isBottom = false;

  var isResizable = _ => { isLeft || isRight || isTop || isBottom; };
  var isResizing = false;
  var resizeStarted = false;

  var isMouseDown = false;

  function cursorStyle(){
    if (!isMouseDown){
      element.style.cursor = 
        isTop && isLeft ? "nwse-resize" :
        isTop && isRight ? "nesw-resize" :
        isBottom && isRight ? "nwse-resize" :
        isBottom && isLeft ? "nesw-resize" :
        isLeft ? "ew-resize" :
        isRight ? "ew-resize" :
        isTop ? "ns-resize" :
        isBottom ? "ns-resize" :
        "default";
    }
  }

  // just for testing
  function cursorName(){
    return isTop && isLeft ? "TopLeft" :
      isTop && isRight ? "TopRight" :
      Bottom && Right ? "BottomRight" :
      Bottom && Left ? "BottomLeft" :
      Left ? "Left" :
      Right ? "Right" :
      Top ? "Top" :
      Bottom ? "Bottom" :
      "nothing";
  }

  window.addEventListener("mousemove", _ => {
    mouseX = event.clientX;
    mouseY = event.clientY;

    if (!isResizing){
      isLeft = Math.abs(mouseX - rectLeft) < d;
      isRight = Math.abs(mouseX - rectRight) < d;
      isTop = Math.abs(mouseY - rectTop) < d;
      isBottom = Math.abs(mouseY - rectBottom) < d;  
    }

    cursorStyle();

    isResizing = isMouseDown && isResizable;
    if (isResizing){

      if (!resizeStarted){
        resizeStarted = true;
      }

      if (isRight){
        resizeRight();
      }

      if (isLeft){
        resizeLeft();
      }

      if (isTop){
        resizeTop();
      }

      if (isBottom){
        resizeBottom();
      }

      function resizeRight(){
        rectRight = mouseX;
        rectWidth = rectRight - rectLeft;
        element.style.width = rectWidth + "px";            
      }

      function resizeLeft(){
        rectLeft = mouseX >= rectRight ? rectRight : mouseX;
        rectWidth = rectRight - rectLeft;
        element.style.left = rectLeft + "px";
        element.style.width = rectWidth + "px";            
      }

      function resizeTop(){
        rectTop = mouseY >= rectBottom ? rectBottom : mouseY;
        rectHeight = rectBottom - rectTop;
        element.style.top = rectTop + "px";
        element.style.height = rectHeight + "px";            
      }

      function resizeBottom(){
        rectBottom = mouseY;
        rectHeight = rectBottom - rectTop;
        element.style.height = rectHeight + "px";
      }

    }
  });

  element.onmousedown = _ => {
    isMouseDown = true;
  }

  element.onmouseup = _ => {
    isMouseDown = false;
  }
}