Editar: Eu coloquei este trecho de código no jsbin:http://jsbin.com/eneru

Eu estou tentando deixar o usuário redimensionar (apenas verticalmente) um elemento DIV com jQuery. Eu li sobre jQuery UI, eu tentei, e em alguns minutos, eu tinha que trabalhar. Mas a biblioteca está adicionando uma sobrecarga de ~ 25KB que eu gostaria de evitar, já que eu só quero um redimensionamento vertical simples.

Então eu tentei fazer isso sozinho. Aqui está o HTML, estou usando o estilo inline para maior clareza:

<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 você pode ver, há uma pequena barra sob o elemento DIV, para que o usuário possa arrastá-lo para cima ou para baixo para redimensionar o DIV. Aqui está o 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, mais ou menos, mas se você arrastar a barra muito rápido, ela pára de seguir o movimento do mouse e tudo quebra.

É a primeira vez que tento fazer algosério (ahem) com JS e jQuery, então eu posso estar fazendo algo idiota. Se sim, por favor me diga :)