How can I make jQuery's draggable function expand the container?

Question

If I have markup like this:

<!-- Other Content -->
<div id="container">
<div class="draggable">
</div>
<div class="draggable">
</div>
</div>
<!-- Other Content -->

How can I have the container div expand vertically (I only want #container to be capable of expanding downward) as I drag one of the draggables? I've thought about using the drag callback, but there's gotta be a CSS way, right?

Answer 1

You can't do it with css, because div#container element didn't get any class triggered from draggables.

Best way is to do it with callback:

$('.draggable').draggable({
   start: function(event, ui) { $('#container').addClass('expand'); },
   stop: function(event, ui) { $('#container').removeClass('expand'); }
});

Answer 2

I have made some progress, but this is still not working the way I would like it to.
Here's how I now have it partially working (using the markup above):

 var dragCatch = function(event, ui) {
    var containerOffset = $('#container').offset().top;
    var containerBottom =  containerOffset + $('#container').height();
    var componentHeight = $(this).height();

    if (event.pageY > containerBottom - componentHeight - 2) {
        $('#container').height(event.pageY - containerOffset + componentHeight + 2);
        $(this).css('top', event.pageY - containerOffset);
    }
};

$(this).each(function() {
    $(this).draggable({
        grid: [117,1]
        ,snap: '.draggable'
        ,snapMode: 'outer'
        ,containment: '#container'
        ,drag: dragCatch
    })
});

This code will successfully resize the #container div, but will stop moving the .draggable div where #container used to end. If I let go, then drag again, then the .draggable will again move to where #container ends, then will stop even if #container continues to expand in size.

Answer 3

The conclusion that I have come to is that this may not even be possible. I went with an alternate method of using jQuery.resizable to do it manually instead.