<div id="container">
  <div id="test1" class="dr">
  </div>
</div>

body {
  padding: 0;
  margin: 0;
}

#container {
  width: 600px;
  height: 400px;
  border: solid blue 1px;
}

.dr {
  position: absolute;
  text-align: center;
  z-index: 2;
  top: 150px;
  left: 150px;
  width: 50px;
  height: 50px;
  border: solid red 2px;
}

.handle {
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  border: solid blue 1px;
}

document.addEventListener("DOMContentLoaded", function () {
  var container = document.querySelector("#container");

  var currentEl;
  var rightClickedEl;

  var status = { handlesAdded: false };

  var previousNonHandleEl;

  container.addEventListener(
    "contextmenu",
    (ev) => {
      ev.preventDefault();

      if (ev.target.classList.contains("dr")) {
        rightClickedEl = ev.target;
        previousNonHandleEl = currentEl;
        container.style.cursor = "default";
        if (status.handlesAdded == false) {
          addHandles(currentEl);
          status.handlesAdded = true;
        }
      }
    },
    false
  );

  container.addEventListener("mousedown", function (ev) {
    console.log("here " + ev.button);
    ev.preventDefault();
    if (rightClickedEl == null) {
      if (ev.target.classList.contains("dr")) {
        currentEl = ev.target;
        previousNonHandleEl = currentEl;
      }
    } else if (rightClickedEl != null) {
      if (
        rightClickedEl.classList.contains("dr") &&
        ev.target.classList.contains("dr")
      ) {
        currentEl = ev.target;
        previousNonHandleEl = currentEl;
      }
      if (ev.target.classList.contains("handle")) {
        currentEl = ev.target;
      }
    }

    if (!status.handlesAdded && currentEl.classList.contains("dr")) {
      document.addEventListener(
        "mousemove",
        (mouseMove = function (e) {
          mousemove(e, currentEl, status);
        }),
        false
      );

      document.addEventListener(
        "mouseup",
        (e) => {
          mouseup(e, mouseMove, status);
        },
        false
      );
    } else if (status.handlesAdded && currentEl.classList.contains("handle")) {
      document.addEventListener(
        "mousemove",
        (resizing = function (e) {
          resize(e, previousNonHandleEl);
        }),
        false
      );

      document.addEventListener(
        "mouseup",
        (e) => {
          mouseup(e, resizing, status);
        },
        false
      );
    }
  });
});

function mousemove(e, currentEl, status) {
  //mousemove logic
}

function resize(e, draggable) {
  const rect = draggable.getBoundingClientRect();

  if (e.target.classList != null) {
    const handlers = e.target.classList;

    if (handlers.contains("se")) {
      draggable.style.width = e.pageX - rect.left + "px";
      draggable.style.height = e.pageY - rect.top + "px";
    }
  }
}

function mouseup(e, mouseObj, status) {
  document.removeEventListener("mousemove", mouseObj, false);
  if (e.button == 2) {
    return;
  }
  if (status.handlesAdded == true) {
    removeElementsByClass("handle", status);
  }
}

function removeElementsByClass(className, status) {
  let elements = document.getElementsByClassName(className);
  while (elements.length > 0) {
    elements[0].parentNode.removeChild(elements[0]);
  }

  status.handlesAdded = false;

  console.log("handlesAdded: " + status.handlesAdded);
}

function addHandles(curEl) {
  var nw = document.createElement("div");
  nw.className = "handle nw";
  nw.style.left = -6 + "px";
  nw.style.top = -6 + "px";
  curEl.appendChild(nw);

  var n = document.createElement("div");
  n.className = "handle n";
  n.style.left = "calc(50% - 6px)";
  n.style.top = -6 + "px";
  curEl.appendChild(n);

  var ne = document.createElement("div");
  ne.className = "handle ne";
  ne.style.right = -7 + "px";
  ne.style.top = -6 + "px";
  curEl.appendChild(ne);

  var e = document.createElement("div");
  e.className = "handle e";
  e.style.right = -7 + "px";
  e.style.top = "calc(50% - 6px)";
  curEl.appendChild(e);

  var w = document.createElement("div");
  w.className = "handle w";
  w.style.left = -6 + "px";
  w.style.top = "calc(50% - 6px)";
  curEl.appendChild(w);

  var sw = document.createElement("div");
  sw.className = "handle sw";
  sw.style.left = -6 + "px";
  sw.style.bottom = -6 + "px";
  curEl.appendChild(sw);

  var s = document.createElement("div");
  s.className = "handle s";
  s.style.left = "calc(50% - 6px)";
  s.style.bottom = -7 + "px";
  curEl.appendChild(s);

  var se = document.createElement("div");
  se.className = "handle se";
  se.style.right = -7 + "px";
  se.style.bottom = -6 + "px";
  curEl.appendChild(se);
}