Bearbeiten: Ich habe diesen Codeausschnitt in jsbin eingefügt:http://jsbin.com/eneru

Ich versuche, den Benutzer die Größe eines DIV-Elements mit jQuery (nur vertikal) ändern zu lassen. Ich habe etwas über die jQuery-Benutzeroberfläche gelesen, es ausprobiert und in einigen Minuten funktionierte es. Aber die Bibliothek fügt einen Overhead von ~ 25 KB hinzu, den ich vermeiden möchte, da ich nur die vertikale Größe ändern möchte.

Also habe ich versucht, es alleine zu machen. Hier ist es das HTML, ich benutze Inline-Styling für Klarheit:

<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>

Wie Sie sehen, befindet sich unter dem DIV-Element eine kleine Leiste, sodass der Benutzer sie nach oben oder unten ziehen kann, um die Größe des DIV zu ändern. Hier ist es der Javascript-Code (mit 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);
        }
    });
});

Es funktioniert mehr oder weniger, aber wenn Sie die Leiste zu schnell ziehen, hört es auf, der Mausbewegung zu folgen, und alles bricht ab.

Es ist das erste Mal, dass ich etwas versucheernst (ahem) mit JS und jQuery, also mache ich vielleicht etwas dummes. Wenn ja, bitte sag es mir :)