如何使用 jQuery UI Resizable 仅水平或垂直调整大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3628194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to resize ONLY horizontally or vertically with jQuery UI Resizable?
提问by Diego
The only solution I've found is to set the max and min height or width with the current value.
我发现的唯一解决方案是使用当前值设置最大和最小高度或宽度。
Example:
例子：
foo.resizable({
maxHeight: foo.height(),
minHeight: foo.height()
});
But this is really ugly, especially if I have to change the element's height programmatically.
但这真的很难看，特别是如果我必须以编程方式更改元素的高度。
回答by Nick Craver
You could set the resize handlesoptionto only show on the left and right (or east/west), like this:
您可以将调整大小handles选项设置为仅显示在左右（或东/西），如下所示：
foo.resizable({
handles: 'e, w'
});?
回答by cburgmer
While the poster was mainly asking for a horizontal-only resize, the question does ask for vertical, too.
虽然海报主要要求仅水平调整大小，但问题也确实要求垂直。
The vertical case has a special issue: You might have set a relative width (e.g. 50%) that you want to keep even when the browser window is resized. However jQuery UI sets an absolute width in px once you first resize the element and the relative width is lost.
垂直情况有一个特殊问题：您可能设置了一个相对宽度（例如 50%），即使在调整浏览器窗口大小时也希望保留该宽度。但是，一旦您第一次调整元素大小并且相对宽度丢失，jQuery UI 就会以 px 为单位设置绝对宽度。
If found the following code to work for this use case:
如果发现以下代码适用于此用例：
$("#resizable").resizable({
handles: 's',
stop: function(event, ui) {
$(this).css("width", '');
}
});
See also http://jsfiddle.net/cburgmer/wExtX/and jQuery UI resizable : auto height when using east handle alone
另请参阅http://jsfiddle.net/cburgmer/wExtX/和jQuery UI 可调整大小：单独使用东手柄时的自动高度
回答by Jan
A very simple solution:
一个非常简单的解决方案：
$( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal
$( ".selector" ).resizable({ grid: [10000, 1] }); // vertical
This works for draggable() as well. Example: http://jsfiddle.net/xCepm/
这也适用于 draggable() 。示例：http: //jsfiddle.net/xCepm/
回答by Lambder
The solution is to configure your resizable so it cancels changes of the dimension you don't want.
解决方案是配置您的可调整大小，以便取消您不想要的维度的更改。
here is an example of vertically only resizable:
这是仅垂直调整大小的示例：
foo.resizable({
resize: function(event, ui) {
ui.size.width = ui.originalSize.width;
}
});
回答by Farhad Malekpour
I wanted to allow re-size the width when browser re-sizes, but not when user changes the size of element, this worked fine:
我想在浏览器重新调整大小时允许重新调整宽度，但在用户更改元素大小时不允许，这很好用：
foo.first().resizable({
resize: function(event, ui) {
ui.element.css('width','auto');
},
});
回答by Farhad Malekpour
For me solutions with both handles and resizehandler worked fine, so user see handle but can resize only horizontally, similar solution should work for vertical. Without bottom right handler user might be unawarethat he can resize element.
对我来说，同时使用句柄和resize处理程序的解决方案工作正常，所以用户看到句柄但只能水平调整大小，类似的解决方案应该适用于垂直。如果没有右下角处理程序，用户可能不知道他可以调整元素大小。
When using ui.size.height = ui.originalSize.height;it will not work properlyif element changed it's size from initial state.
使用时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", '');
}
});
For better performance $(this)could be removed:
为了更好的性能$(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", '');
}
});
回答by Vinod Kumar
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>
