Beibehaltene Position für ziehbare Framer Motion-Komponenten
P粉449281068
P粉449281068 2024-03-31 22:29:49
0
1
379

Ich erstelle ein Widget-Dashboard, in dem Sie Widgets verschieben können. Mein Ziel ist es, die Position der Widgets nach dem Ziehen beizubehalten, damit sie in zukünftigen Sitzungen genau an derselben Position geladen werden können.

Hier ist eine Codesandbox, die die Probleme veranschaulicht, die ich mit Framer-Motion habe: https://codesandbox.io/p/sandbox/interesting-sun-p8h6cu.

Der anfängliche

-Wert im topleft-Widget spiegelt seine Ausgangsposition korrekt wider, aber ich kann die neue Position nach dem Ziehen nicht beibehalten.

Ich aktualisiere die Position des Widgets im onDragEnd-Handler, was wiederum den onDragEnd 处理程序中小部件的位置,该处理程序又更新小部件上的 topleft 样式。通过 Framer-motion 使用 transform:translate-Stil des Widgets aktualisiert. Verwenden Sie

über Framer-Motion, um den Positionierungsstil zu ziehen und zu aktualisieren, was zu einem Widget führt:
  1. Behält seine neue Position auf DragEnd korrekt bei
  2. top + left 样式使 transform:translateBewegen Sie sich in der Benutzeroberfläche nach dem vorherigen Punkt, da
  3. die Wirkung des Ziehens von Stilen verdoppelt wird.

transform:translateIch weiß nicht, wie ich dieses Problem lösen kann. Ich habe versucht,

für die anfängliche Positionierung zu verwenden, aber es funktioniert nicht. Außerdem denke ich, dass die Framer-Bewegung diese überschreibt, sobald sie gezogen wird, was zu einem anderen unerwünschten Verhalten führt.

TLDR: Ich habe Probleme beim Anzeigen absolut positionierter Komponenten, die über die Ziehfunktion von Framer-motion gezogen werden können🎜
P粉449281068
P粉449281068

Antworte allen(1)
P粉621033928

您说得对,topleft 会加倍,因为 Framer 拖动功能正在改变 xy 。由于您随后将 xy 变换应用于顶部和左侧,因此您会得到意想不到的结果。

如果您只更改 xy,一切都应该保持同步。

style={{ x: widget.x, y: widget.y }}

而不是

style={{ left: widget.x, top: widget.y }}
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!