Edytować: Umieszczam ten fragment kodu w jsbin:http://jsbin.com/eneru

Próbuję pozwolić użytkownikowi zmienić rozmiar (tylko pionowo) elementu DIV za pomocą jQuery. Czytałem o jQuery UI, wypróbowałem go, a po kilku minutach zadziałało. Ale biblioteka dodaje około 25 KB narzutu, którego chciałbym uniknąć, ponieważ chcę tylko prostej zmiany rozmiaru w pionie.

Próbowałem to zrobić sam. Oto HTML, używam stylizacji w wierszu dla jasności:

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

Jak widać, pod elementem DIV znajduje się mały pasek, więc użytkownik może przeciągnąć go w górę lub w dół, aby zmienić rozmiar DIV. Oto kod JavaScript (za pomocą 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);
        }
    });
});

Działa mniej więcej, ale jeśli przeciągniesz pasek zbyt szybko, przestaje on podążać za ruchem myszy i wszystko się psuje.

Po raz pierwszy próbuję coś zrobićpoważny (ahem) z JS i jQuery, więc mogę robić coś głupiego. Jeśli tak, proszę mi powiedzieć :)