Hacerle a un div el resize de un textarea

javpx · #1 (**permalink**) 08/09/2016, 17:27

Hola.

Alguien me podría por favor ayudar con hacerle un resize a un div?, por ejemplo, a un textarea se le puede cambiar el tamaño con el mouse desde una esquina, es posible hacer eso mismo con un div?

Muchas gracias por su ayuda.

Alexis88 · #2 (**permalink**) 08/09/2016, 23:15

Solo necesitas trabajar con los eventos mousedown (cuando se pulsa el botón del ratón) y mouseup (cuando se lo suelta).

La idea es que el tamaño del <div> se supedite a la posición en la que se encuentre el cursor del ratón una vez que se suelta el botón izquierdo del mismo, pero que previamente fue pulsado cuando se encontraba sobre el elemento. Entonces, para evitar conflictos cuando pulses el botón estando el cursor en otra parte del documento que no sea el <div>, puedes utilizar una bandera o comodín (cualquier variable) que cambie de valor cuando ocurran los eventos mencionados. Cuando se pulse el botón izquierdo del ratón estando el cursor del mismo sobre el <div>, el valor de la bandera, que inicialmente puede ser, por ejemplo, false, cambiaría a true y volvería a ser false cuando se suelte el botón izquierdo del ratón estando el cursor fuera del <div>. En ese momento, se comprueba que el valor de la bandera sea true —obviamente antes de que cambie— y las dimensiones del <div> serían las mismas que la posición en los ejes X y Y del cursor cuando se soltó el botón izquierdo del ratón.

Código Javascript:

Ver originalvar div = document.querySelector("#id del div"), flag = false;
 
div.addEventListener("mousedown", function(){
    flag = true;
}, false);
 
document.addEventListener("mouseup", function(event){
    if (flag){
        div.style.width = event.clientX + "px";
        div.style.height = event.clientY + "px";        
        flag = false;
    }
}, false);

DEMO

Es una forma algo rudimentaria de hacerlo, pero puedes tomarla como base para hacer algo mejor.

javpx · #3 (**permalink**) 09/09/2016, 06:46

Hola Alexis88, tu ayuda me servido bastante, veré si lo puedo adaptar y mejorar a lo que necesito.

Muchas gracias.

mpozo · #4 (**permalink**) 09/09/2016, 12:13

Supongamos que existe una propiedad que se llama resize y supongamos que nos importa que ie no la acepte

Código CSS:

Ver originaldiv{
  resize: both;
  overflow: auto;
}

[URL="http://caniuse.com/#search=resize"]Tabla de compatibilidad[/URL]

Pero casi siempre hay un roto para un descosido. Aunemos ambos lenguajes

Código HTML:

Ver original<!DOCTYPE html>
<html dir="ltr" lang="es-es">
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        div{
            width: 250px;
            height: 150px;
            background-color: red;
            resize: both;
            overflow: auto;
        }
    </style>
</head>
<body>
 
    <div id="foo"></div>
 
 
    <script>
        var div = document.querySelector("#foo"), flag = false;
 
        if (!('resize' in div.style)) {
 
            div.addEventListener("mousedown", function(){
                flag = true;
            }, false);
             
            document.addEventListener("mouseup", function(event){
                if (flag){
                    div.style.width = event.clientX + "px";
                    div.style.height = event.clientY + "px";        
                    flag = false;
                }
            }, false);
        }
    </script>
 
</body>
</html>

Esto hará que si el navegador no acepta la propiedad, se logre el mismo efecto con código javascript

javpx · #5 (**permalink**) 09/09/2016, 16:44

Excelente, no sabia que el css tenia una propiedad para el resize, ya la probé y me funciona de maravilla, gracias mpozo.