Edit: Я поместил этот фрагмент кода в jsbin:http://jsbin.com/eneru

Я пытаюсь позволить пользователю изменить размер (только по вертикали) элемента DIV с помощью jQuery. Я читал о jQuery UI, я попробовал, и через несколько минут у меня все заработало. Но библиотека добавляет накладные расходы ~ 25 КБ, которых я хотел бы избежать, так как мне нужно только простое вертикальное изменение размера.

Поэтому я попытался сделать это самостоятельно. Вот это HTML, я использую встроенный стиль для ясности:

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

Как видите, под элементом DIV есть небольшая полоска, поэтому пользователь может перетаскивать ее вверх или вниз, чтобы изменить размер DIV. Вот это код Javascript (с использованием 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);
        }
    });
});

Это работает, более или менее, но если вы перетаскиваете панель слишком быстро, она перестает следовать за движением мыши, и все ломается.

Я впервые пытаюсь что-то сделатьserious (хм) с JS и jQuery, так что я могу делать что-то глупое. Если это так, пожалуйста, скажите мне :)