Beibehaltene Position für ziehbare Framer Motion-Komponenten

Question

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

über Framer-Motion, um den Positionierungsstil zu ziehen und zu aktualisieren, was zu einem Widget führt:

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
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🎜

Answer 1

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

如果您只更改 x 和 y，一切都应该保持同步。

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

而不是

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