jQuery containment animation

Question

Hello,

I've a problem with the animation method.

<div id="containment">
    <div id="child1">C1</div>
    <div id="child2">C2</div>
    <div id="child3">C3</div>
</div

C1 to C3 are draggable elements, and I haven't applied any constraint on it, because when I'm out of #containment, I automatically resize it.

$("#containment > div").bind("dragstop", function(event, ui) {
    var size = $.extend({}, $("#containment").data("originalSize"));
    $.each($("#containment > div"), function(index, d) {
        width = parseInt($(d).css("left"), 10) + parseInt($(d).outerWidth(), 10);
        height = parseInt($(d).css("top"), 10) + parseInt($(d).outerHeight(), 10);
        size.width = (width > size.width) ? (width + 50) : size.width;
        size.height = (height > size.height) ? (height + 50) : size.height;
    });

    $("#containment").animate({
        width: size.width,
        height: size.height
    }, 'slow');
});

Problem is, when dragstop is fired, the child I moved out is hidden and appears only when the #containment animation is over it.

In my Screen B1 and B2 have the same size, just B1 isn't totally visible because animation is running...

Thanks

Answer 1

Just a guess, but if you have 'overflow:hidden' from the div#containment, when you drag the node, any part of it will be obscured by the parent div. (Even though it's outside the boundaries of the parent container, DOM-wise, it's still a child). Alternatively, you could move the child node outside of the parent div inside your dragstop listener.