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;
    }
  }
}

Great lesson in function scope 👍

Thanks for this.

If you wish to apply this change to multiple elements with the clalssName .item then you have to use document.querySelectorAll and then loop through them before adding the mousedown event listener like this:

const el = document.querySelectorAll(".item")

// Loop through the array of items
el.forEach(item => {
    item.addEventListener("mousedown", mousedown)
})

Please note that you cannot access "el" as it's not an element by an array of elements so whenever you want to modify the element then you must loop through the array first.

This is great!! Thanks for the YouTube video!

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>