9

我正在使用 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为.dragbox，height我会看到两个框的预期行为，但我需要使用min-height它，因为我不知道内部内容的长度。

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

演示 （我使用 Chrome 27 和 Safari 6）

4

3 回答 3

17

jQuery 的 draggable 通过操纵 csstop和left值来工作。当一个盒子同时设置了top和bottom值（并且没有静态高度）时，盒子将拉伸以匹配这两个属性。这就是导致调整大小的原因。

一种解决方法是在盒子上设置一个静态高度，或者如果这不是一个选项，则在创建可拖动对象时将底部值设置为“自动”，并同时获取当前的“顶部”位置以确保元素保持不变。

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

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

于 2013-06-25T14:23:44.103 回答
1

@xec 给了我主要的想法，我用这种方式改变了它，它对我有用；

 jQuery("#container").draggable({
                    start: function (event, ui) {
                        $(this).css({
                            right: "auto",
                            top: "auto"
                        });
                    }
                });
于 2014-06-10T23:29:47.090 回答
0

对我来说，以这种方式工作（对于我的底部，左侧绝对定位的 div）：

        $("#topBarUpDownDiv").draggable({ axis: "x",
            stop: function( event, ui ) {
                var elem=$(this)[0];
                $(elem).css({ bottom: $(this).position().bottom, top: "auto" });
           }
        });
于 2017-06-19T19:40:28.313 回答