首页 文章

具有绝对位置和底部属性的jQuery UI可拖动

提问于
浏览 次
7

我正在使用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> 在拖动时调整大小 . 如果我将 .dragbox 的 min-height 更改为 height ，我会看到两个框的预期行为，但我需要使用 min-height ，因为我不知道内部内容的长度 .

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

DEMO（我使用Chrome 27和Safari 6）

javascript css jquery-ui draggable css-position

3 回答

  • 0

    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/

    回复于
  • 13

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

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

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

    $("#topBarUpDownDiv").draggable({ axis: "x",
            stop: function( event, ui ) {
                var elem=$(this)[0];
                $(elem).css({ bottom: $(this).position().bottom, top: "auto" });
           }
        });
    回复于

相关问题