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);
    } 
});

Answer 2

In case anyone is interested in the future, I got it to work nicely with this:

$('.rsh').draggable({
    axis: 'y', 
    containment: 'parent',
    helper: 'clone', 
    drag: function (event, ui) { 
        var height = ui.offset.top - 85; 
        $(this).prev().height(height); 
    } 
});

This is the fiddle.

The use of clone is the key. The draggable elements (.rsh) are relative, so if you don't use a clone the element moves twice as far as the mouse because it is also affected by the change in the height of the previous div.

Note: The - 85 is just a quirk of the page layout making allowance for the header and so forth.

Answer 3

Here is another alternative to Nick's version, it automatically moves the horizontal handler to the top and to zero as a nice effect. Also, it adjusts the height size of both sections mutually.

$('.horizontal_handler').draggable({

        axis: 'y', 
        containment: 'parent',
        helper: 'clone', 
        drag: function (event, ui) { 

            var height = ui.offset.top - 220 // 220 : initial top margin to the previousDiv
            , referenceHeight = nextDivHeight + previousDivHeight  //500 px initial height size
            , previousSection = $(this).prev()
            , nextSection = $(this).next();

            if ((nextSection.height() === 0) && (referenceHeight - height < 0)){
                return;
            }

            previousSection.height(height); 
            nextSection.height(referenceHeight - height ) ;


            if (nextSection.height()< 20){
                    previousSection.height( height+ nextSection.height() );
                    nextSection.height(0);
                }

            if (previousSection.height()< 20){
                    nextSection.height(referenceHeight - height - previousSection.height() );
                    previousSection.height(0); 
                }
        } 
    });