lo que pretendo es cambiar el tamaño de un div con eventos del mouse lo cual ya lo pude realizar usando toda la ventana del explorador sin embargo ese div al que se le podía cambiar el tamaño lo necesito dentro de otro div pero al ponerlo como hijo de otro div esto ya no funciona, alguien me puede ayudar, este es el codigo funcional:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item{
height: 50px;
width: 50px;
position: absolute;
background-color: tomato;
}
.resizer{
position: absolute;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: blueviolet;
z-index: 2;
}
.resizer.ne{
top: -1px;
right: -1px;
cursor: ne-resize;
}
.resizer.nw{
top: -1px;
left: -1px;
cursor: nw-resize;
}
.resizer.sw{
bottom: -1px;
left: -1px;
cursor: sw-resize;
}
.resizer.se{
bottom: .1px;
right: -1px;
cursor: se-resize;
}
.c{
width: 500px;
height: 500px;
position: absolute;
top:100;
left: 200;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="item">
<div class="resizer ne"></div>
<div class="resizer nw"></div>
<div class="resizer sw"></div>
<div class="resizer se"></div>
</div>
<script>
const el = document.querySelector(".item");
let isRezing = false;
el.addEventListener('mousedown',mousedown);
function mousedown(e) {
console.log("mousedown in item");
window.addEventListener('mousemove',mousemove);
window.addEventListener('mouseup',mouseup);
let prevX = e.clientX;
let prevY = e.clientY;
function mousemove(e){
console.log("mousemov in item");
if (!isRezing) {
console.log("mousemov in item isRezing");
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(){
console.log("mouseup in item");
window.removeEventListener('mousemove',mousemove);
window.removeEventListener('mouseup',mouseup);
}
}
const resizers = document.querySelectorAll(".resizer");
let currentResizer;
for(let resizer of resizers){
resizer.addEventListener('mousedown',mousedown);
console.log(resizer);
function mousedown(e) {
console.log("mousedown in resizer");
currentResizer = e.target;
isRezing = true;
let prevX = e.clientX;
let prevY = e.clientY;
window.addEventListener('mousemove',mousemove);
window.addEventListener('mouseup',mouseup);
function mousemove(e) {
console.log("...");
const rect = el.getBoundingClientRect();
console.log(rect);
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() {
console.log("mouseup");
window.removeEventListener('mousemove',mousemove);
window.removeEventListener('mouseup',mouseup);
isRezing = false;
}
}
}
</script>
</body>
</html>
Al colocar el div "item" dentro de un div "c"
<div class="c">
<div class="item">
<div class="resizer ne"></div>
<div class="resizer nw"></div>
<div class="resizer sw"></div>
<div class="resizer se"></div>
</div>
</div>
El funcionamiento cambia por completo, tengo entendido que es por el metodo getBoundingClientRect() el cual regresa las propiedades top, botton, left, rigth, width, heigth, X y Y de un elemento en base a la pantalla del navegador y no de las propiedades del CSS ¿hay alguna otra forma de obtener estas propiedades? ¿cómo podría solucionar esto? ya estuve intentando mucho tiempo y no doy con el resultado.