¿Cómo permitir cambiar el tamaño verticalmente de un DIV con solo jQuery, sin complementos?

Question

Jun 30, 2009, 01:39 AM

¿Cómo permitir cambiar el tamaño verticalmente de un DIV con solo jQuery, sin complementos?

Editar: Pongo este fragmento de código en jsbin:http://jsbin.com/eneru

Estoy intentando que el usuario redimensione (solo verticalmente) un elemento DIV con jQuery. Leí sobre jQuery UI, lo probé y, en unos minutos, lo hice funcionar. Pero la biblioteca está agregando una sobrecarga de ~ 25KB que me gustaría evitar, ya que solo quiero un simple cambio de tamaño vertical.

Así que traté de hacerlo por mi cuenta. Aquí está el HTML, estoy usando un estilo en línea para mayor claridad:

<div id="frame" style="border: 1px solid green; height: 350px">
    <div style="height: 100%">Lorem ipsum blah blah</div>
    <span id="frame-grip" style="display: block; width: 100%; height: 16px; background: gray"></span>
</div>

Como puede ver, hay una pequeña barra debajo del elemento DIV, por lo que el usuario puede arrastrarlo hacia arriba o hacia abajo para cambiar el tamaño del DIV. Aquí está el código Javascript (usando jQuery):

$(document).ready(function(){
    var resizing = false;
    var frame = $("#frame");
    var origHeightFrame = frame.height();
    var origPosYGrip = $("#frame-grip").offset().top;
    var gripHeight = $("#frame-grip").height();


    $("#frame-grip").mouseup(function(e) {
        resizing = false;
    });

    $("#frame-grip").mousedown(function(e) {
        resizing = true;
    });

    $("#frame-grip").mousemove(function(e) {
        if(resizing) {
            frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
        }
    });
});

Funciona, más o menos, pero si arrastra la barra demasiado rápido, deja de seguir el movimiento del mouse y todo se rompe.

Es la primera vez que intento hacer algo.grave (ejem) con JS y jQuery, así que puedo estar haciendo algo tonto. Si es así, por favor dime :)