code

const el = document.querySelector(".item");

let isResizing = false;

el.addEventListener("mousedown", mousedown);

function mousedown(e) {
  window.addEventListener("mousemove", mousemove);
  window.addEventListener("mouseup", mouseup);

  let prevX = e.clientX;
  let prevY = e.clientY;

  function mousemove(e) {
    if (!isResizing) {
      let newX = prevX - e.clientX;
      let newY = prevY - e.clientY;

      const rect = el.getBoundingClientRect();

      el.style.left = rect.left - newX + "px";
      el.style.top = rect.top - newY + "px";

      prevX = e.clientX;
      prevY = e.clientY;
    }
  }

  function mouseup() {
    window.removeEventListener("mousemove", mousemove);
    window.removeEventListener("mouseup", mouseup);
  }
}

const resizers = document.querySelectorAll(".resizer");
let currentResizer;

for (let resizer of resizers) {
  resizer.addEventListener("mousedown", mousedown);

  function mousedown(e) {
    currentResizer = 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 = el.getBoundingClientRect();

      if (currentResizer.classList.contains("se")) {
        el.style.width = rect.width - (prevX - e.clientX) + "px";
        el.style.height = rect.height - (prevY - e.clientY) + "px";
      } else if (currentResizer.classList.contains("sw")) {
        el.style.width = rect.width + (prevX - e.clientX) + "px";
        el.style.height = rect.height - (prevY - e.clientY) + "px";
        el.style.left = rect.left - (prevX - e.clientX) + "px";
      } else if (currentResizer.classList.contains("ne")) {
        el.style.width = rect.width - (prevX - e.clientX) + "px";
        el.style.height = rect.height + (prevY - e.clientY) + "px";
        el.style.top = rect.top - (prevY - e.clientY) + "px";
      } else {
        el.style.width = rect.width + (prevX - e.clientX) + "px";
        el.style.height = rect.height + (prevY - e.clientY) + "px";
        el.style.top = rect.top - (prevY - e.clientY) + "px";
        el.style.left = rect.left - (prevX - e.clientX) + "px";
      }

      prevX = e.clientX;
      prevY = e.clientY;
    }

    function mouseup() {
      window.removeEventListener("mousemove", mousemove);
      window.removeEventListener("mouseup", mouseup);
      isResizing = false;
    }
  }
}

I have noticed that, to make it work, I have to give different names to the two mousedown functions. If I don't do that, I always get the resize event, not the move one.

I have noticed that, to make it work, I have to give different names to the two mousedown functions. If I don't do that, I always get the resize event, not the move one.

Anyway, great tutorial

@DNature what u mean with "you must loop through the array first", i know that i must do that but how i can know when stop

ok i do that and it work :D

for (var i in el){
    if(el[i] == e.target){
        elem = el[i];
    }
}

const rect = elem.getBoundingClientRect();

elem.style.left = rect.left - newX + "px";
elem.style.top = rect.top - newY + "px";

thanks for share this code................ this really well .

style.css
.item {
height: 50px;
width: 50px;
position: absolute;
background: orange
}
.resizer {
position: absolute;
height: 10px;
width: 10px;
border-radius: 5px;
background-color: black;
z-index: 2;
}
.resizer .nw{
top: -1px;
left: -1px;
cursor: nw-resize;
}
.resizer .ne{
top: -1px;
right: -1px;
cursor: ne-resize;
}
.resizer .sw{
bottom: -1px;
left: -1px;
cursor: sw-resize;
}
.resizer .se{
bottom: -1px;
right: -1px;
cursor: se-resize;
}
..............................................................
index.html

<div class="item"> 
	<div class="resizer ne"> </div>
	<div class="resizer nw"> </div>
	<div class="resizer sw"> </div>
	<div class="resizer se"> </div>
</div>