Resize elements by dragging divider handler

Question

I want to be able to drag a divider up and down to resize the divs above and below the divider on a fixed page height. These divs could be in a table, although they need not

Answer 1

This is a version of Nick's code (which was really helpful, thanks!) that allows subsequent dividers to remain static. It works by resizing the divs above and below the dragged divider in opposite directions.

$('.rsh').draggable({
    axis: 'y'
    ,containment: 'parent'
    ,helper: 'clone'
    , start: function(event, ui) { 
        $(this).attr('start_offset',$(this).offset().top);
        $(this).attr('start_next_height',$(this).next().height());
    }
    ,drag: function (event, ui) {           
        var prev_element=$(this).prev();
        var next_element=$(this).next();
        var y_difference=$(this).attr('start_offset')-ui.offset.top;            
        prev_element.height(ui.offset.top-prev_element.offset().top);
        next_element.height(parseInt($(this).attr('start_next_height'))+y_difference);
    } 
});