我正在建立一個小部件儀表板，您可以在其中移動小部件，我的目標是在拖曳小部件後保留它們的位置，以便在將來的會話中將它們加載到完全相同的位置。
這裡有一個codesandbox，它說明了我在使用framer-motion時遇到的問題：https://codesandbox.io/p/sandbox/interesting-sun-p8h6cu。
小部件上的初始 top 和 left 值正確反映了其起始位置，但在拖曳它後我無法保留其新位置。
我正在更新 onDragEnd 處理程序中小部件的位置，該處理程序又更新小部件上的 top 和 left 樣式。透過 Framer-motion 使用 transform:translate 進行拖曳並更新定位樣式，這會產生一個小工具：
top left 樣式使 transform:translate 拖曳樣式的效果加倍。 我不知道如何解決這個問題。我嘗試使用 transform:translate 進行初始定位，但它不起作用。另外，現在我認為一旦被拖動，成幀器運動就會覆蓋它，從而導致不同的不必要的行為。
TLDR：我在顯示絕對定位的元件時遇到問題，這些元件可透過 Framer-motion 的拖曳功能進行拖曳
您說得對，
top和left會加倍，因為 Framer 拖曳功能正在改變x和y。由於您隨後將 xy 變換應用於頂部和左側，因此您會得到意想不到的結果。如果您只更改
x和y，一切都應該保持同步。style={{ x: widget.x, y: widget.y }}而不是
style={{ left: widget.x, top: widget.y }}