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

In short, I would like to be able to emulate what happens on the jsFiddle site, although I only need the vertical resize. jsFiddle have used mooTools, but I want to do it with jQuery.

One important complication: I won't know the size of the div above the divider until it is actually built dynamically, so I can't just start with a set absolute positioning.

What is the best way forward? I have a feeling I'll just be reinventing the wheel if I don't ask :)

[BTW: a couple of questions with similar names are linked to jsFiddle examples that don't work (for example, this).

So far I have used this:

    $('.rsh').draggable({
        axis:'y',
        drag: function (event, ui) {            
            var offsettop = ui.offset.top;
            $(this).prev().css({
                height: offsettop
            });
    });

Needless to say, it ain't workin' right yet.

Answer 1

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 2

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