Skip to content

Instantly share code, notes, and snippets.

@jonasgroendahl
Created January 16, 2020 23:02
Show Gist options
  • Save jonasgroendahl/efc5c880328860b9550ceab5753a6a55 to your computer and use it in GitHub Desktop.
Save jonasgroendahl/efc5c880328860b9550ceab5753a6a55 to your computer and use it in GitHub Desktop.
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;
}
}
}
@glburman
Copy link

Great lesson in function scope 👍

@DNature
Copy link

DNature commented Jan 18, 2021

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.

@ivacharles
Copy link

This is great!! Thanks for the YouTube video!

@sfederici
Copy link

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.

@sfederici
Copy link

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

@k-i-o
Copy link

k-i-o commented Dec 21, 2021

@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

@k-i-o
Copy link

k-i-o commented Dec 21, 2021

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

@millionhashemabucu
Copy link

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

@vladrbyte
Copy link

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment