내가 찾은 유일한 해결책은 현재 값으로 최대 및 최소 높이 또는 너비를 설정하는 것입니다.
예:
foo.resizable({
maxHeight: foo.height(),
minHeight: foo.height()
});
그러나 이것은 정말 추합니다. 특히 프로그래밍 방식으로 요소의 높이를 변경해야하는 경우 더욱 그렇습니다.
답변:
다음 과 같이 왼쪽과 오른쪽 (또는 동쪽 / 서쪽)에만 표시 되도록 크기 조정 handles옵션 을 설정할 수 있습니다 .
foo.resizable({
handles: 'e, w'
});
포스터는 주로 가로 전용 크기 조정을 요구했지만 질문은 세로도 요구합니다.
수직 케이스에는 특별한 문제가 있습니다. 브라우저 창 크기를 조정할 때에도 유지하려는 상대 너비 (예 : 50 %)를 설정했을 수 있습니다. 그러나 jQuery UI는 처음 요소의 크기를 조정하고 상대 너비가 손실되면 절대 너비를 px로 설정합니다.
이 사용 사례에서 작동하는 다음 코드를 찾은 경우 :
$("#resizable").resizable({
handles: 's',
stop: function(event, ui) {
$(this).css("width", '');
}
});
http://jsfiddle.net/cburgmer/wExtX/ 및 jQuery UI 크기 조정 가능 : 동쪽 핸들 만 사용할 때 자동 높이 참조
px.
height에 ''에서 resize와 stop핸들러)
매우 간단한 솔루션 :
$( ".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>