Ich versuche, eine reaktionsfähige Oberfläche mit jQuery UI zu erstellen, die bewegliche und in der Größe veränderbare Elemente erlaubt, die proportional bleiben, selbst wenn die Größe des Bildschirms geändert wird.
Beispiel: Ссылка
Ich verwende die Benutzeroberflächenrückrufe für dragStop und resizeStop , um die Pixelpositionswerte in Prozentwerte zu konvertieren, nachdem der Benutzer die Größenänderung abgeschlossen oder gezogen hat.
Dies funktioniert einwandfrei, wenn der übergeordnete Container eine explizite Höhe und Breite hat - jQuery UI konvertiert die Prozentwerte vor der anschließenden Größenänderung oder Ziehungen zurück in Pixel, und meine Callbacks geben sie nach der endgültigen Größenänderung zurück oder ziehen. Alles Gute, Dory.
Das Problem tritt während der Größenänderung auf , wenn das übergeordnete Element des resizierbaren Elements auf "height" gesetzt ist: auto (in der verknüpften Fiddle verwende ich ein untergeordnetes Bild, um dem übergeordneten Element eine Höhe zu geben)
Wenn ich versuche, das UI-Element in der Größe zu ändern, konvertiert jQuery UI den Prozentsatz der oberen und linken Pixel falsch in Pixel, und das Element springt in Position.
Dieses Problem scheint Chrome-spezifisch zu sein. Firefox zeigt gelegentliche Mini-Sprünge in Position, aber es scheint sich um leichte Rundungsdifferenzen zu handeln. In Chrome ist die Positionsverschiebung dramatisch.
Beim Festlegen einer expliziten Höhe für den übergeordneten Container wird das UI-Problem gelöst, es ist jedoch keine Antwort möglich.
Irgendwelche Ideen?
==========================================
@ peteykuns Antwort unten löste mein grundlegendes Problem, aber es gab ein Ablegerproblem, von dem ich dachte, dass es sich lohnt, es anzusprechen.
Chrome verwendet Unterpixel bei der Berechnung der automatischen Größenanpassung, so dass die Höhe mit jQuery bis .height() eine ungenaue, runde Antwort liefert (und ein visuelles Wackeln während der Konvertierung zwischen Pixeln und Prozent und umgekehrt) ).
Daher verwendet die Verwendung von Vanilla JS .getBoundingClientRect().height anstelle von .height() ein Subpixelergebnis für eine jiggless-Lösung.
Nochmals vielen Dank für Ihre Hilfe, @peteykun
Wie wäre es, wenn Sie den height des Containers explizit festlegen, bevor die Größenänderung stattfindet?
Idealerweise hätte dies mit der Option start für .resizable{} möglich sein sollen, aber ich habe es selbst ausprobiert und es hat nicht geholfen. Stattdessen wird durch das Binden von .mouseover() an das Handle der gewünschte Effekt erzielt:
JSFiddle: Ссылка
Update: Um die Reaktionszeit beizubehalten, können Sie die Höhe Überprüfen Sie das Update unten. auto nach Abschluss der Größenänderung erneut festlegen.
JSFiddle: Ссылка
Update # 2: Um den Fall zu umgehen, in dem die Maus den Anfasser vor einer zweiten Größenänderung nicht verlässt, setzen wir stattdessen die Höhe bei Mouseout zurück:
%Vor%JSFiddle: Ссылка
wollte nur hinzufügen, die Geige, und der Code aus der Frage funktionierte fast perfekt für mich, Sie müssen sicherstellen, dass Sie berücksichtigen, dass die Polsterung zwar beim Zurücksetzen der Breite / Höhe.
%Vor%Tags und Links jquery css jquery-ui google-chrome