Die einzige Lösung, die ich gefunden habe, besteht darin, die maximale und minimale Höhe oder Breite mit dem aktuellen Wert festzulegen.
Beispiel:
foo.resizable({
maxHeight: foo.height(),
minHeight: foo.height()
});
Aber das ist wirklich hässlich, besonders wenn ich die Höhe des Elements programmgesteuert ändern muss.
Antworten:
Sie konnten die Größe ändern gesetzt handlesOption zeigen nur auf der linken und rechten (oder Ost / West), wie folgt aus :
foo.resizable({
handles: 'e, w'
});
Während das Poster hauptsächlich nach einer nur horizontalen Größenänderung fragte, fragt die Frage auch nach vertikaler Größe.
Der vertikale Fall hat ein besonderes Problem: Möglicherweise haben Sie eine relative Breite (z. B. 50%) festgelegt, die Sie beibehalten möchten, auch wenn die Größe des Browserfensters geändert wird. Die jQuery-Benutzeroberfläche legt jedoch eine absolute Breite in px fest, sobald Sie die Größe des Elements zum ersten Mal ändern und die relative Breite verloren geht.
Wenn der folgende Code für diesen Anwendungsfall gefunden wurde:
$("#resizable").resizable({
handles: 's',
stop: function(event, ui) {
$(this).css("width", '');
}
});
Siehe auch http://jsfiddle.net/cburgmer/wExtX/ und jQuery UI-Größenänderung: Automatische Höhe, wenn nur der Ostgriff verwendet wird
px.
heightauf und Handler)''resizestop
Eine sehr einfache Lösung:
$( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal
$( ".selector" ).resizable({ grid: [10000, 1] }); // vertical
Dies funktioniert auch für draggable (). Beispiel: http://jsfiddle.net/xCepm/
{handles: 'se', grid: [10000, 1], autoHide: true}
Die Lösung besteht darin, Ihre Größenänderung so zu konfigurieren, dass Änderungen der nicht gewünschten Dimension abgebrochen werden.
Hier ist ein Beispiel für die vertikale Größenänderung:
foo.resizable({
resize: function(event, ui) {
ui.size.width = ui.originalSize.width;
}
});
Ich wollte eine Größenänderung der Breite zulassen, wenn der Browser die Größe ändert, aber nicht, wenn der Benutzer die Größe des Elements ändert. Dies funktionierte einwandfrei:
foo.first().resizable({
resize: function(event, ui) {
ui.element.css('width','auto');
},
});
Für mich resizefunktionierten Lösungen mit beiden Griffen und dem Handler einwandfrei, sodass der Benutzer den Griff sieht, aber nur die Größe horizontal ändern kann. Eine ähnliche Lösung sollte für die Vertikale funktionieren. Ohne den Handler unten rechts weiß der Benutzer möglicherweise nicht, dass er die Größe des Elements ändern kann.
Bei Verwendung funktioniertui.size.height = ui.originalSize.height; es nicht richtig, wenn das Element seine Größe vom Ausgangszustand geändert hat.
foo.resizable({
// Handles left right and bottom right corner
handles: 'e, w, se',
// Remove height style
resize: function(event, ui) {
$(this).css("height", '');
}
});
Für eine bessere Leistung $(this)könnte entfernt werden:
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>