аюсь создать изменяемый размер div без использования библиотеки интерфейса jQuery.

var myY = 0;
var mouseDown = false;
var originalHeight = 0; 

function resize(e){
    if(mouseDown == true){
        $("#cooldiv").height(originalHeight+e.pageY-myY);
    }
} 

$(document).ready(function(){
    $().mouseup(function(e){
        myY = 0;
        mouseDown = false;
        originalHeight = 0;
        $().unbind("mousemove", resize);
    });

    $("#resizeBar").mousedown(function(e){
        myY = e.pageY;
        originalHeight = $("#cooldiv").height();
        mouseDown = true;
        $().bind("mousemove", resize);
    });
});

...

<div id="cooldiv" style="width: 500px; height: 300px; background-color: #cccccc; position: relative;">
<div id="resizeBar" style="height: 10px; width: 500px; background-color: #aaaaaa; position: absolute; bottom: 0;"></div>
</div>  

Первое изменение размера работает нормально (то есть mousedown, mousemove, затем mouseup), но при последующих (mousedown + mousemove) браузер пытается перетащить весь div resizeBar вместо правильного изменения размера родительского контейнера. При mouseup, div начинает изменять размер "cooldiv" на mousemove без необходимости смены мышки до следующего щелчка мышью.

Эти проблемы не отображаются в Internet Explorer.