javascript JQuery UI resizable 不支持 position: fixed；有什么建议吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4819518/
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 resizable does not support position: fixed; Any recommendations?
提问by Chev
JQuery UI's .resizablefunction does not support position: fixed;elements. The moment you try to resize them it switches their position attribute to absolute. Any recommended fixes?
JQuery UI 的.resizable功能不支持position: fixed;元素。当您尝试调整它们的大小时，它会将它们的位置属性切换为绝对值。有什么推荐的修复方法吗？
I have some chat windows that pop up and are draggable around the document. They are position fixed so that they don't scroll with the page behind them. They all work perfectly until you try to resize a window, that's when it transitions to position: absolute;and then gets left behind when the page scrolls.
我有一些聊天窗口会弹出并可在文档周围拖动。它们的位置是固定的，因此它们不会随着后面的页面滚动。在您尝试调整窗口大小之前，它们都可以完美运行，那时它会过渡到position: absolute;页面滚动时然后被抛在后面。
I tried handling the resize stop event and changing the position to fixed:
我尝试处理调整大小停止事件并将位置更改为固定：
stop: function (event, ui)
{
$(chatWindow).css('position', 'fixed');
}
This doesn't work because the positioning (top:and left:) are not correct for the fixed element and when you stop resizing the element switches to fixed positioning and jumps to weird places on the page. Sometimes jumps out of the page boundries and is lost forever.
这不起作用，因为定位（top:和left:）对于固定元素不正确，并且当您停止调整元素大小时，元素会切换到固定定位并跳转到页面上的奇怪位置。有时会跳出页面边界并永远丢失。
Any suggestions?
有什么建议？
采纳答案by Smokin Joe
To get over this problem I wrapped the .resizable() block with the .draggable() block:
为了解决这个问题，我用 .draggable() 块包裹了 .resizable() 块：
<div id="draggable-dealie">
<div id="resizable-dealie">
</div>
</div>
the corresponding js:
对应的js：
$("#draggable-dealie").draggable();
$("#resizable-dealie").resizable();
and ensure you have the property position:fixed !important;set in the #draggable-dealie CSS:
并确保您position:fixed !important;在 #draggable-dealie CSS 中设置了该属性：
#draggable-dealie {
position:fixed !important;
width:auto;
height:auto;
}
I have a demonstration at: http://jsfiddle.net/smokinjoe/FfRRW/8/
回答by Jide
If, like me, you have a fixed div at the bottom of the page, then you can just add !important to these css rules to make it stick at the bottom :
如果像我一样，你在页面底部有一个固定的 div，那么你可以在这些 css 规则中添加 !important 以使其粘在底部：
.fixed {
position: fixed !important;
top: auto !important;
bottom: 0 !important;
left: 0;
right: 0;
}
And just make it resizable by its north border :
并通过其北边界调整大小：
$('.fixed').resizable({
handles: "n"
});
回答by Dane Iracleous
Simply force position:fixed on the element when resizing starts and when resizing stops.
简单地强制位置：在调整大小开始和调整大小停止时固定在元素上。
$(".e").draggable().resizable({
start: function(event, ui) {
$(".e").css("position", "fixed");
},
stop: function(event, ui) {
$(".e").css("position", "fixed");
}
});
JSFiddle: http://jsfiddle.net/5feKU/
JSFiddle：http: //jsfiddle.net/5feKU/
回答by Maximilian Ehlers
No beauty but how about saving the position (top and left) in separate vars on the start of the resize (I think the method is called "start")?
没有美感，但是如何在调整大小开始时将位置（顶部和左侧）保存在单独的变量中（我认为该方法称为“开始”）？
UPDATE (Thank you for the comment... The event fires too late): As JqueryUI generates a second object "ui" on making a object resizable it gives that ui-object a field: ui.originalPosition... That should be the position of the fixed element before the resizing...
更新（感谢您的评论...该事件触发得太晚了）：当 JqueryUI 在使对象可调整大小时生成第二个对象“ui”时，它为该 ui-object 提供了一个字段：ui.originalPosition...那应该是调整大小之前固定元素的位置...
回答by clexmond
Here's the solution I came up with, it's a little more code than I'd like, but it fixes the problem:
这是我想出的解决方案，它比我想要的代码多一点，但它解决了问题：
$("#test").resizable({stop:function(e, ui) {
var pane = $(e.target);
var left = pane.attr("startLeft");
var top = pane.attr("startTop");
pane.css("position", "fixed");
pane.css("top", top);
pane.css("left", left);
}});
$("#test").draggable({create: function(e, ui) {
var pane = $(e.target);
var pos = pane.position();
pane.attr("startLeft", pos.left + "px");
pane.attr("startTop", pos.top + "px");
}, stop: function(e, ui) {
var pane = $(e.target);
pane.attr("startLeft", ui.position.left + "px");
pane.attr("startTop", ui.position.top + "px");
}});
This stores the top and left position in the html element (needs xhtml doctype to be valid) and uses that information to set the position at the end of the resizing event.
这将存储 html 元素中的顶部和左侧位置（需要 xhtml doctype 有效）并使用该信息在调整大小事件结束时设置位置。
回答by Alexandros Spyropoulos
This is a dirty solution but works for me.
这是一个肮脏的解决方案，但对我有用。
this.resizable({
start:function (event, ui){
x =ui.originalPosition.left+ $(ui.originalElement).parent().scrollLeft()
y = ui.originalPosition.top+ $(ui.originalElement).parent().scrollTop()
},
resize:function (event, ui){
$(ui.originalElement).css('left' , x);
$(ui.originalElement).css('top' , y);
}
回答by oldlol
I had that problem today, and I absolutely hate "un-aesthetic" workarounds... So I decided to experiment a little to see if there wasn't a "better" solution ...and at some point I had a hunch:
我今天遇到了这个问题，我非常讨厌“不美观”的解决方法......所以我决定尝试一下，看看是否有一个“更好”的解决方案......在某些时候我有一个预感：
html:
html：
<div class="fixed"></div>
javascript (jquery):
javascript (jquery):
$('.fixed').resizable();
$('.fixed').draggable();
css:
css：
.fixed{
position: fixed !important;
}
Jquery just got outplayed by CSS, damn!
Jquery 刚刚被 CSS 打败了，该死！
