Единственное решение, которое я нашел, - установить максимальную или минимальную высоту или ширину с текущим значением.
Пример:
foo.resizable({
maxHeight: foo.height(),
minHeight: foo.height()
});
Но это действительно уродливо, особенно если мне нужно изменить высоту элемента программно.
Вы можете установить параметр handles, чтобы показывать только слева и справа (или восток/запад), например:
foo.resizable({
handles: 'e, w'
});
В то время как плакат в основном запрашивал изменение размера по горизонтали, вопрос также требует вертикали.
В вертикальном случае есть особая проблема: вы могли бы установить относительную ширину (например, 50%), которую вы хотите сохранить, даже когда размер окна браузера изменяется. Однако пользовательский интерфейс jQuery устанавливает абсолютную ширину в px после первоначального изменения размера элемента и относительной ширины.
Если для этого варианта использования найден следующий код:
$("#resizable").resizable({
handles: 's',
stop: function(event, ui) {
$(this).css("width", '');
}
});
См. также http://jsfiddle.net/cburgmer/wExtX/ и jQuery UI resizable: авто высота при использовании только восточной ручки
Очень простое решение:
$( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal
$( ".selector" ).resizable({ grid: [10000, 1] }); // vertical
Это работает и для draggable(). Пример: http://jsfiddle.net/xCepm/
Решение состоит в том, чтобы сконфигурировать ваш изменяемый размер, чтобы отменить изменения требуемого размера.
вот пример вертикально только изменяемого размера:
foo.resizable({
resize: function(event, ui) {
ui.size.width = ui.originalSize.width;
}
});
Я хотел разрешить изменение размера ширины при изменении размера браузера, но не тогда, когда пользователь меняет размер элемента, это отлично работает:
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>