I've been struggling to achieve this! We don't want an extra dependency hence not using UI draggable.
Whatever I tried is over here: http://jsfiddle.net/wSTcJ/
I'm assuming you want a different bar for the vertical resizing.
Some notes of the changes I made:
mouseupshould be bound to a parent element, usually
documentyou ensure the mouse events within your page will always be captured.
mousedownhelps keep you sane.
mousemovebindings they may be added multiple times, later firing as many times.
drag = truebecause the
mousemoveevent shouldn't exist at all when the user isn't dragging.
heightto 100% in the CSS.
Most dragable divs are given an absolute positioning rather then relative. Changing this will also require some changes in the code.