jQuery UI draggable with absolute position and bottom property

Question

I am using jQuery UI to create a draggable <div>. The <div> is absolutely positioned to the bottom-right or top-left using CSS:

.dragbox {
    position: absolute;
    width: 140px;
    min-height: 140px; /* I need to use min-height */
    border: 3px solid black;
    padding: 10px;
}
.bottom {
    bottom: 5px; /* causes box to resize when dragged */
    right: 5px;
}
.top {
    top: 5px; /* does not cause box to resize */
    left: 5px;
}

The HTML looks like this:

<div class="dragbox bottom">
    Bottom Box :(
</div>
<div class="dragbox top">
    Top Box :)
</div>

The JavaScript is $('.dragbox').draggable(); to make the <div> elements draggable. The top-left <div> works as expected, but the bottom-right <div> resizes when dragged. If I change the min-height poperty of .dragbox to height I see the expected behavior for both boxes, but I need to use min-height for this because I don't know the length of the inner content.

How do I position the <div> in the bottom-right and enable dragging without having the <div> resize when dragged? The top-left and bottom-right <div> elements should behave the same way.

DEMO (I use Chrome 27 and Safari 6)

Solution 1

jQuery's draggable works by manipulating the css top and left values. When a box has both top and bottom values set (and no static height), the box will stretch to match both properties. This is what's causing the resizing.

A workaround could be to set a static height on the box, or if that's not an option, set the bottom value to "auto" when the draggable is created, and fetch the current "top" position at the same time to make sure the element stays put.

$('.dragbox').draggable({
    create: function( event, ui ) {
        $(this).css({
            top: $(this).position().top,
            bottom: "auto"
        });
    }
});

http://jsfiddle.net/expqj/8/

Solution 2

@xec gave me the main idea and I changed it this way and it worked for me;

 jQuery("#container").draggable({
                    start: function (event, ui) {
                        $(this).css({
                            right: "auto",
                            top: "auto"
                        });
                    }
                });

Comments

[DonSteep]

Using this idea I was able to solve my case where in addition the box has a dynamic height (and should grow upwards), but fortunately it's not changing during a drag. I do the same, but using the 'start' and 'stop' options so that I set the top attribute as the anchor (auto-ing bottom) when the drag starts and swap them back when it ends.