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();

并确保您在＃draggable-dealie CSS中设置了属性position:fixed !important;：

#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"
});

Answer 3

简单强制位置：在调整大小开始和调整大小时停止在元素上。

$(".e").draggable().resizable({
   start: function(event, ui) {
      $(".e").css("position", "fixed");
   },
   stop: function(event, ui) {
      $(".e").css("position", "fixed");
   }
});

JSFiddle：http://jsfiddle.net/5feKU/

Answer 4

没有美，但是如何在调整大小的开始时将位置（顶部和左侧）保存在单独的变量中（我认为该方法称为“开始”）？

更新（感谢您的评论......事件发生得太晚了）：由于JqueryUI在使对象可调整大小时生成第二个对象“ui”，因此它为ui-object提供了一个字段：ui.originalPosition ...这应该是在调整大小之前固定元素的位置...

Answer 5

这是我提出的解决方案，它比我想要的代码多一点，但它解决了问题：

$("#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才有效）并使用该信息设置调整大小事件结束时的位置。

Answer 6

这是一个肮脏的解决方案但对我有用。

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);
}

Answer 7

我今天遇到了这个问题，我绝对讨厌“不美观”的解决方法...所以我决定尝试一下，看看是否有一个“更好”的解决方案...而且在某些时候我有预感：

HTML：

<div class="fixed"></div>

javascript（jquery）：

$('.fixed').resizable();
$('.fixed').draggable();

的CSS：

.fixed{
    position: fixed !important;
}

Jquery刚被CSS击败，该死的！

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

7 个答案: