3

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.

1 respuesta 1

0

Encontré la solución sustituyendo el método getBoundingClientRect() que como mencionaba anterior mente este suele tomar los valores (width, height, top, left, right) del elemento en base al scroll del navegador y no al CSS sustituyendo los condicionales por

if (currentResizer.classList.contains('se')) {
    objeto.style.width = objeto.clientWidth - (posX - e.clientX) + "px";
    objeto.style.height = objeto.clientHeight - (posY - e.clientY) + "px";
}

donde objeto es el elemento a redimensionar, posX y posY la ubicación anterior del mouse y e.clientX, e.clientY la ubicación actual del mouse.

  • objeto.clientWidth: ancho del elemento
  • objeto.clientHeight: alto del elemento
  • objeto.clientTop: posición de la esquina superior izquierda del elemento (eje Y)
  • objeto.clientLeft: posicion de la esquina superior izquierda del elemento (eje X)

De esta forma obtenía los valores del mismo objeto, espero les sirva

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.