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 top
和 left
-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
处理程序中小部件的位置,该处理程序又更新小部件上的 top
和 left
样式。通过 Framer-motion 使用 transform:translate
-Stil des Widgets aktualisiert. Verwenden Sie
top
+ left
样式使 transform:translate
Bewegen Sie sich in der Benutzeroberfläche nach dem vorherigen Punkt, da
transform:translate
Ich weiß nicht, wie ich dieses Problem lösen kann. Ich habe versucht,
TLDR: Ich habe Probleme beim Anzeigen absolut positionierter Komponenten, die über die Ziehfunktion von Framer-motion gezogen werden können🎜
您说得对,
top
和left
会加倍,因为 Framer 拖动功能正在改变x
和y
。由于您随后将 xy 变换应用于顶部和左侧,因此您会得到意想不到的结果。如果您只更改
x
和y
,一切都应该保持同步。而不是