JQuery UI可调整大小不支持position:fixed; 有什么建议？

Question

JQuery UI的.resizable功能不支持position: fixed;元素.当您尝试调整它们的大小时,它会将其position属性切换为绝对属性.任何推荐的修复？

我有一些弹出的聊天窗口,可以在文档周围拖动.它们的位置是固定的,因此它们不会随着它们后面的页面滚动.它们都可以完美地工作,直到您尝试调整窗口大小,当它转换到窗口时position: absolute;,然后在页面滚动时将其留下.

我尝试处理resize stop事件并将位置更改为fixed:

    stop: function (event, ui)
    {
        $(chatWindow).css('position', 'fixed');
    }

这不起作用,因为定位(top:和left:)对于固定元素不正确,并且当您停止调整元素大小时,切换到固定定位并跳转到页面上的奇怪位置.有时跳出页面边界并永远丢失.

有什么建议？

Answer 1

为了克服这个问题,我用.draggable()块包装了.resizable()块:

<div id="draggable-dealie">
    <div id="resizable-dealie">
    </div>
</div>

相应的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/

Answer 2

如果像我一样,你在页面底部有一个固定的div,那么你可以在这些css规则中添加!important以使其粘在底部:

.fixed {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0;
  right: 0;
}

只需通过其北部边界调整大小:

$('.fixed').resizable({
  handles: "n"
});