Question

我发现的唯一解决方案是使用当前值设置最大和最小高度或宽度。

示例：

foo.resizable({ 
  maxHeight: foo.height(), 
  minHeight: foo.height() 
});

但这真的很难看，特别是如果我必须以编程方式更改元素的高度。

Answer 1

您可以将调整大小handles option设置为仅显示在左侧和右侧（或东/西），如下所示：

foo.resizable({
    handles: 'e, w'
});

You can give it a try here.

Answer 2

虽然海报主要是要求横向调整大小，但问题确实也要求垂直。

垂直案例有一个特殊问题：即使调整浏览器窗口大小，您也可能设置了要保留的相对宽度（例如50％）。但是，一旦第一次调整元素大小并且相对宽度丢失，jQuery UI就会以px为单位设置绝对宽度。

如果找到以下代码适用于此用例：

$("#resizable").resizable({
    handles: 's',
    stop: function(event, ui) {
        $(this).css("width", '');
   }
});

另请参阅http://jsfiddle.net/cburgmer/wExtX/和jQuery UI resizable : auto height when using east handle alone

Answer 3

一个非常简单的解决方案：

$( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal
$( ".selector" ).resizable({ grid: [10000, 1] }); // vertical

这也适用于draggable（）。示例：http://jsfiddle.net/xCepm/

Answer 4

解决方案是配置您的resizable，以便取消您不想要的维度更改。

这是一个垂直只可调整大小的例子：

foo.resizable({
  resize: function(event, ui) { 
    ui.size.width = ui.originalSize.width;
  }      
});

Answer 5

我希望在浏览器重新调整大小时允许重新调整宽度，但是当用户更改元素的大小时，这不会很好：

foo.first().resizable({
    resize: function(event, ui) { 
    ui.element.css('width','auto');
    },
});

Answer 6

对于我来说，具有两个句柄和resize处理程序的解决方案工作正常，因此用户可以看到句柄但只能水平调整大小，类似的解决方案应该适用于垂直。没有右下角处理程序用户可能不知道他可以调整元素大小。

使用ui.size.height = ui.originalSize.height;时，如果元素从初始状态改变了大小，将无法正常工作。

foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        $(this).css("height", '');
    }
});

为了获得更好的效果$(this)可以删除：

var foo = jQuery('#foo');
foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        foo.css("height", '');
    }
});

Answer 7

Successfully working div position Vertically and horizontally
-------------------------------------------------------------

<head>

    <style>
    .resizable {
        height: 100px;
        width: 500px;
        background: #09C;
    }
    .resizable-x {
        height: 100px;
        width: 500px;
        background: #F60;
    }
    </style>

    <script>
     $(function() {

        $( ".resizable" ).resizable({
            grid: [10000, 1]
        });

        $( ".resizable-x " ).resizable({
            grid: [1, 10000]
        });


        $( ".resizable" ).draggable();
        });

      });
        </script>`enter code here`
    </head>

    <body>
    <div class="resizable"></div>
    <div class="resizable-x"></div>
    </body>

如何使用jQuery UI Resizable水平或垂直调整大小？

7 个答案: