JQuery UI可resize不支持position：fixed; 有什么建议？
JQuery UI的.resizable函数不支持position: fixed; 元素。 当您尝试调整它们的大小时，它会将其position属性切换为绝对属性。 任何推荐的修复？
我有一些弹出的聊天窗口，可以在文档周围拖动。 它们的位置是固定的，因此它们不会随着它们后面的页面滚动。 它们都完美地工作，直到你试图调整窗口大小，当它转换到position: absolute; 然后在页面滚动时落后。
我尝试处理resize stop事件并将位置更改为fixed：
stop: function (event, ui) { $(chatWindow).css('position', 'fixed'); }
这不起作用，因为定位（ top:和left: :)对于固定元素不正确，当您停止调整元素大小时，切换到固定定位并跳转到页面上的奇怪位置。 有时跳出页面边界并永远丢失。
有什么建议？
为了克服这个问题，我用.draggable（）块包装了.resizable（）块：
相应的js：
$("#draggable-dealie").draggable(); $("#resizable-dealie").resizable();
并确保你拥有财产position:fixed !important; 在#draggable-dealie CSS中设置：
#draggable-dealie { position:fixed !important; width:auto; height:auto; }
我有一个演示： http ： //jsfiddle.net/smokinjoe/FfRRW/8/
如果像我一样，你在页面底部有一个固定的div，那么你可以在这些css规则中添加！important以使其粘在底部：
.fixed { position: fixed !important; top: auto !important; bottom: 0 !important; left: 0; right: 0; }
只需通过其北部边界resize：
$('.fixed').resizable({ handles: "n" });
简单地强制位置：在resize开始和resize停止时固定在元素上。
$(".e").draggable().resizable({ start: function(event, ui) { $(".e").css("position", "fixed"); }, stop: function(event, ui) { $(".e").css("position", "fixed"); } });
JSFiddle： http ： //jsfiddle.net/5feKU/
没有美，但如何在resize的开始时将位置（顶部和左侧）保存在单独的变量中（我认为该方法称为“开始”）？
更新（感谢您的评论…事件触发太晚了）：由于JqueryUI在使对象可resize时生成第二个对象“ui”，因此它为ui-object提供了一个字段：ui.originalPosition …那应该是resize之前固定元素的位置…
这是我提出的解决方案，它比我想要的代码多一点，但它解决了这个问题：
$("#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"); }});
这将顶部和左侧位置存储在html元素中（需要xhtml doctype才有效）并使用该信息设置resize事件结束时的位置。
这是一个肮脏的解决方案，但对我有用。
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); }
我今天遇到了这个问题，我绝对讨厌“不美观”的解决方法……所以我决定尝试一下，看看是否有“更好”的解决方案……而且在某些时候我有预感：
HTML：
javascript（jquery）：
$('.fixed').resizable(); $('.fixed').draggable();
CSS：
.fixed{ position: fixed !important; }
Jquery刚被CSS击败，该死的！