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