JQuery UI resizable 不支持 position: fixed;有什么建议吗？答案

【问题标题】：JQuery UI resizable does not support position: fixed; Any recommendations?JQuery UI resizable 不支持 position: fixed;有什么建议吗？
【发布时间】：2011-06-16 17:05:50
【问题描述】：

JQuery UI 的.resizable 函数不支持position: fixed; 元素。当您尝试调整它们的大小时，它会将它们的位置属性切换为绝对值。有什么推荐的修复方法吗？

我有一些聊天窗口会弹出并可在文档周围拖动。它们的位置是固定的，因此它们不会随着它们后面的页面滚动。在您尝试调整窗口大小之前，它们都可以正常工作，即当它转换为 position: absolute; 并在页面滚动时被抛在后面。

我尝试处理调整大小停止事件并将位置更改为固定：

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

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

有什么建议吗？

【问题讨论】：

把它放在一个固定的容器里怎么样（我还没有测试过）？
把它放在一个固定为 0 0 的容器中怎么样？

标签： javascript jquery jquery-ui draggable resizable

【解决方案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/

【讨论】：

太棒了！这是一个更好的解决方案。 JQuery UI 只需要解决这个问题，这样您就可以在单个固定元素上同时使用这两种方法，但在此之前，这是我所见过的优雅的解决方案。
!important 部分为我解决了问题并为我节省了大量工作。谢谢。
使用 !important 硬编码顶部/左侧解决了我的问题。它不漂亮，但我会接受它，因为要么就是这样，要么自己重新实现可调整大小的逻辑。

【解决方案2】：

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

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

只需让它的北边界调整大小：

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

【讨论】：

这应该是仅作为 css 的公认答案，而不是 html 和 js 开销。

【解决方案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/

【讨论】：

【解决方案4】：

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

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

【讨论】：

我不知道为什么我没想过要尝试。交叉你的手指:)
我运行了一个测试，看起来该位置在启动事件触发之前已更改。该死！
嘎！因此，我将位置保存在拖动和/或创建窗口的每个位置。这让我在停止事件中获得了正确的位置，但你猜怎么着？它在停止事件后改变位置。愤怒。
这太奇怪了，我可以在调整大小停止事件中将位置更改为固定，但更改顶部或左侧没有任何作用。这些必须在停止事件之后设置，没有其他解释。
好吧，我撒谎了，我可以设置停止事件的位置。我只是错误地设置了 CSS。哦！但是确实你不能在开始事件中获得位置，因为它已经被改变了。

【解决方案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 有效），并使用该信息在调整大小事件结束时设置位置。

【讨论】：

【解决方案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);
}

【讨论】：

【解决方案7】：

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

html:

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

javascript (jquery)：

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

css:

.fixed{
    position: fixed !important;
}

Jquery 刚刚被 CSS 打败，该死！

【讨论】：