javascript jQuery UI 可拖动，具有绝对位置和底部属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17299596/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI draggable with absolute position and bottom property
提问by ChrisP
I am using jQuery UI to create a draggable <div>. The <div>is absolutely positioned to the bottom-right or top-left using CSS:
我正在使用 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;
}
The HTML looks like this:
HTML 如下所示：
<div class="dragbox bottom">
Bottom Box :(
</div>
<div class="dragbox top">
Top Box :)
</div>
The JavaScript is $('.dragbox').draggable();to make the <div>elements draggable. The top-left <div>works as expected, but the bottom-right <div>resizes when dragged. If I change the min-heightpoperty of .dragboxto heightI see the expected behavior for both boxes, but I need to use min-heightfor this because I don't know the length of the inner content.
JavaScript 是$('.dragbox').draggable();使<div>元素可拖动。左上角<div>按预期工作，但右下角<div>在拖动时会调整大小。如果我将min-heightpoperty更改为.dragbox，height我会看到两个框的预期行为，但我需要为此使用min-height它，因为我不知道内部内容的长度。
How do I position the <div>in the bottom-right and enable dragging without having the <div>resize when dragged? The top-left and bottom-right <div>elements should behave the same way.
如何将 定位<div>在右下角并启用拖动而不<div>在拖动时调整大小？左上角和右下角<div>元素的行为方式应该相同。
DEMO(I use Chrome 27 and Safari 6)
演示（我使用 Chrome 27 和 Safari 6）
回答by xec
jQuery's draggable works by manipulating the css topand leftvalues. When a box has both topand bottomvalues set (and no static height), the box will stretch to match both properties. This is what's causing the resizing.
jQuery 的可拖动通过操作 csstop和left值来工作。当一个框同时设置top和bottom值（并且没有静态高度）时，框将拉伸以匹配这两个属性。这就是导致调整大小的原因。
A workaround could be to set a static height on the box, or if that's not an option, set the bottom value to "auto" when the draggable is created, and fetch the current "top" position at the same time to make sure the element stays put.
解决方法可能是在框上设置静态高度，或者如果这不是一个选项，则在创建可拖动对象时将底部值设置为“自动”，并同时获取当前的“顶部”位置以确保元素保持不变。
$('.dragbox').draggable({
create: function( event, ui ) {
$(this).css({
top: $(this).position().top,
bottom: "auto"
});
}
});
回答by Teoman shipahi
@xec gave me the main idea and I changed it this way and it worked for me;
@xec 给了我主要的想法，我以这种方式改变了它，它对我有用；
jQuery("#container").draggable({
start: function (event, ui) {
$(this).css({
right: "auto",
top: "auto"
});
}
});
回答by BernieSF
for me, worked this way (for my bottom, left absolute positioned div):
对我来说，以这种方式工作（对于我的底部，左绝对定位 div）：
$("#topBarUpDownDiv").draggable({ axis: "x",
stop: function( event, ui ) {
var elem=$(this)[0];
$(elem).css({ bottom: $(this).position().bottom, top: "auto" });
}
});
