javascript - 絶対位置と下のプロパティでドラッグ可能なjQuery UI

Question

jQuery UI を使用してドラッグ可能な<div>. は<div>、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;
}

HTML は次のようになります。

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

JavaScript は$('.dragbox').draggable();、<div>要素をドラッグ可能にすることです。左上は期待どおりに機能しますが、ドラッグする<div>と右下のサイズが変更されます。のpoperty をに<div>変更すると、両方のボックスで期待される動作が見られますが、内部コンテンツの長さが分からないため、これを使用する必要があります。min-height.dragboxheightmin-height

<div>を右下に配置し、ドラッグ時にサイズ変更せずにドラッグできるようにするにはどうすればよい<div>ですか? 左上と右下の<div>要素は同じように動作する必要があります。

デモ (私は Chrome 27 と Safari 6 を使用しています)