如何调整水平或垂直与jQuery的UI可resize？
我find的唯一解决scheme是设置最大和最小高度或宽度与当前值。
例：
foo.resizable({ maxHeight: foo.height(), minHeight: foo.height() }); 但是这真的很丑，特别是如果我不得不以编程方式更改元素的高度。
提前致谢。
迭戈
您可以将resizehandles选项设置为仅在左侧和右侧（或东/西）显示，如下所示：
foo.resizable({ handles: 'e, w' });
你可以在这里试试。
虽然海报主要是要求横向resize，但问题也是要求垂直的。
垂直的情况有一个特殊的问题：你可能已经设置了一个相对的宽度（例如50％），即使浏览器窗口被resize，你也要保留它。 但是，一旦你第一次调整元素的大小和相对宽度丢失，jQuery UI设置px的绝对宽度。
如果find下面的代码来为这个用例工作：
$("#resizable").resizable({ handles: 's', stop: function(event, ui) { $(this).css("width", ''); } });
另请参阅http://jsfiddle.net/cburgmer/wExtX/和jQuery UI可resize：单独使用东方句柄时的自动高度
非常简单的解决scheme：
$( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal $( ".selector" ).resizable({ grid: [10000, 1] }); // vertical
这也适用于draggable（）。 例如： http : //jsfiddle.net/xCepm/
解决scheme是configuration您的可resize，以取消您不想要的维度的更改。
这里是垂直唯一可resize的示例：
foo.resizable({ resize: function(event, ui) { ui.size.width = ui.originalSize.width; } });
我想在浏览器重新resize时允许重新调整宽度的大小，但是当用户改变元素的大小时，不能这样做：
foo.first().resizable({ resize: function(event, ui) { ui.element.css('width','auto'); }, });
对于我来说，解决scheme的句柄和resize处理程序工作正常，所以用户看到句柄，但只能水平resize，类似的解决scheme应该为垂直工作。 没有右下angular处理程序的用户可能不知道他可以调整元素的大小。
当使用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>
