具有绝对位置和底部属性的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>按预期工作,但右下角<div>在拖动时调整大小.如果我改变min-height的poperty .dragbox给height我看两个盒子预期的行为,但我需要用min-height这个,因为我不知道内部内容的长度.

如何<div>在右下方定位并在拖动<div>时启用拖动而不调整大小？左上角和右下角<div>元素的行为应该相同.

演示 (我使用Chrome 27和Safari 6)

Answer 1

jQuery的可拖动工作是通过操纵css top和left值来实现的.当一个框具有两个top和bottom值设置(并且没有静态高度)时,该框将拉伸以匹配两个属性.这就是导致调整大小的原因.

解决方法可能是在框上设置静态高度,或者如果这不是一个选项,则在创建draggable时将底部值设置为"auto",并同时获取当前"top"位置以确保元素保持不变.

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

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