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

Posted 2023-05-08

【中文标题】jQuery UI 可拖动，具有绝对位置和底部属性

【英文标题】：jQuery UI draggable with absolute position and bottom property

【发布时间】：2013-06-22 09:12:27

【问题描述】：

我正在使用 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）

【参考方案1】：

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

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

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

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

【讨论】：

使用这个想法，我能够解决我的情况，即盒子还有一个动态高度（并且应该向上增长），但幸运的是它在拖动过程中没有改变。我也这样做，但使用“开始”和“停止”选项，以便在拖动开始时将顶部属性设置为锚点（自动底部），并在拖动结束时将它们交换回来。

【参考方案2】：

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

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

【参考方案3】：

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

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