14

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

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

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

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

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

有什么建议么？

4

7 回答 7

11

为了解决这个问题，我用 .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/

于 2013-02-20T00:50:00.833 回答
6

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

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

并通过其北边界调整大小：

$('.fixed').resizable({
  handles: "n"
});
于 2013-02-05T22:03:40.753 回答
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/

于 2014-04-13T08:18:11.377 回答
2

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

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

于 2011-01-27T17:14:07.503 回答
2

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

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

于 2011-02-04T20:46:26.917 回答
1

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

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);
}
于 2013-02-07T17:14:39.677 回答
0

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

html:

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

javascript (jquery):

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

CSS：

.fixed{
    position: fixed !important;
}

Jquery 刚刚被 CSS 打败了，该死的！

于 2012-05-15T13:34:36.417 回答