私が見つけた唯一の解決策は、現在の値で最大と最小の高さまたは幅を設定することです。
例：
foo.resizable({
maxHeight: foo.height(),
minHeight: foo.height()
});
しかし、これは本当に醜いです。特に、プログラムで要素の高さを変更する必要がある場合はそうです。
回答:
次のように、サイズ変更handlesオプションを左右（または東/西）にのみ表示するように設定できます。
foo.resizable({
handles: 'e, w'
});
ポスターは主に水平方向のみのサイズ変更を求めていましたが、質問は垂直方向も求めています。
垂直の場合には特別な問題があります。ブラウザウィンドウのサイズが変更された場合でも保持したい相対幅（たとえば50％）を設定している可能性があります。ただし、最初に要素のサイズを変更すると、jQuery UIは絶対幅をピクセル単位で設定し、相対幅は失われます。
このユースケースで機能する次のコードが見つかった場合：
$("#resizable").resizable({
handles: 's',
stop: function(event, ui) {
$(this).css("width", '');
}
});
http://jsfiddle.net/cburgmer/wExtX/およびjQueryUIのサイズ変更可能：イーストハンドルのみを使用する場合の自動高さも参照してください。
pxます。
height''resizestop
非常に簡単な解決策：
$( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal
$( ".selector" ).resizable({ grid: [10000, 1] }); // vertical
これはdraggable（）でも機能します。例：http：//jsfiddle.net/xCepm/
{handles: 'se', grid: [10000, 1], autoHide: true}
ブラウザのサイズを変更するときに幅のサイズを変更できるようにしたかったのですが、ユーザーが要素のサイズを変更したときは許可しませんでした。これは問題なく機能しました。
foo.first().resizable({
resize: function(event, ui) {
ui.element.css('width','auto');
},
});
私の場合、ハンドルと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", '');
}
});
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>