如何在jQuery UI可调整大小的情况下仅水平或垂直调整大小？
我找到的唯一解决方案是用当前值设置最大和最小高度或宽度 例如：如何在jQuery UI可调整大小的情况下仅水平或垂直调整大小？,jquery,jquery-ui,jquery-ui-resizable,Jquery,Jquery Ui,Jquery Ui Resizable,我找到的唯一解决方案是用当前值设置最大和最小高度或宽度 例如： foo.resizable({ maxHeight: foo.height(), minHeight: foo.height() }); 但这真的很难看，尤其是如果我必须以编程方式更改元素的高度。可以将调整大小设置为仅显示在左侧和右侧（或东/西），如下所示： foo.resizable({ handles: 'e, w' }); 解决方案是配置可调整尺寸，以便取消不需要的尺寸更改 以下是仅可垂直调整大小的
foo.resizable({
maxHeight: foo.height(),
minHeight: foo.height()
});
foo.resizable({
handles: 'e, w'
});
解决方案是配置可调整尺寸，以便取消不需要的尺寸更改 以下是仅可垂直调整大小的示例：
foo.resizable({
resize: function(event, ui) {
ui.size.width = ui.originalSize.width;
}
});
虽然海报主要要求只调整水平尺寸，但问题也要求调整垂直尺寸 垂直案例有一个特殊问题：您可能已经设置了一个相对宽度（例如50%），即使在调整浏览器窗口的大小时，您也希望保持该相对宽度。但是，一旦您第一次调整元素的大小并且相对宽度丢失，jqueryui就会在px中设置一个绝对宽度 如果发现以下代码适用于此用例：
$("#resizable").resizable({
handles: 's',
stop: function(event, ui) {
$(this).css("width", '');
}
});
另请参见和一个非常简单的解决方案：
$( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal
$( ".selector" ).resizable({ grid: [10000, 1] }); // vertical
示例：我想在浏览器重新调整大小时允许重新调整宽度，但在用户更改元素大小时不允许，这很好：
foo.first().resizable({
resize: function(event, ui) {
ui.element.css('width','auto');
},
});
对于我来说，带有手柄和调整大小手柄的解决方案运行良好，所以用户可以看到手柄，但只能水平调整大小，类似的解决方案应该适用于垂直方向。如果没有右下角的处理程序，用户可能不知道他可以调整元素的大小 使用
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", '');
}
});
为了获得更好的性能，$（此）
可以删除：
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", '');
}
});
垂直和水平方向成功工作div位置
-------------------------------------------------------------
.可调整大小{
高度：100px；
宽度：500px；
背景：#09C；
}
.可调整大小的-x{
高度：100px；
宽度：500px；
背景：#F60；
}
$（函数（）{
$（“.resizable”）.resizable({
网格：[10000，1]
});
$（“.resizable-x”）.resizable({
网格：[11000]
});
$（“.resizeable”）.draggable（）；
});
});
`在这里输入代码`
这不是也有点难看吗？这样用户会看到一个他无法使用的手柄。非常有趣，谢谢。我会记住的。我认为重要的是要注意，可调整大小的元素必须由css设置其宽度，否则在调整大小后将丢失。看，这就是我一直在寻找的解决方案。出于某种原因，即使该区域的句柄被禁用，它的维度似乎仍然被设置为px。如果你不使用这种方法，你就会失去基于%的高度或宽度。实际上，这在jQueryUI1.11.0中似乎不起作用。直接在元素上设置的CSS宽度不是从初始宽度获取的。我试图将宽度设置为一个百分比，它会被大量的px
所覆盖。多谢了，这个技巧还可以在调整大小时忽略保持纵横比的“移位拖动”（对于水平调整大小，在调整大小和停止处理程序中将css高度设置为'
）真的很难看！！此外，正确的解决方案（我们应该使用的解决方案）是@Nick Craver'sI agree！：-）但它与resizeable（）和draggable（）配合使用非常好。我喜欢这个！除了在数学上很酷外，它还将控制柄保留在右下角，给出了元素可调整大小的视觉提示。在公认的解决方案中，调整大小句柄是隐藏的，用户必须猜测底部边距是一个热点。这是完美的，原因是@corwin.amber statedThat非常适合我的需要：{handles:'se'，grid:[10000，1]，autoHide:true}
我刚刚发现这个解决方案有一个警告。当作为内联样式完成时，它仍将放置宽度和高度。这对我来说是一个问题，只有垂直的解决方案。一旦我调整了它的大小，宽度就设置好了，它不再是100%（而是px值）。只是把它放在这里，以防其他人在搜索时遇到它。@Fernker是的，这是一个难题。如果你给div指定了相同值的“最小宽度”和“最大宽度”属性，你可以得到一个百分比宽度。它不会被覆盖：）无法通过移位拖动测试。@没有什么必要，你能描述一下“移位拖动测试”吗？
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>