私はウィジェットを移動できるウィジェット ダッシュボードを作成しています。私の目標は、ウィジェットをドラッグした後でもウィジェットの位置を保持し、将来のセッションでまったく同じ場所にロードできるようにすることです。

これは、フレーマーモーションで発生している問題を説明するコードサンドボックスです: https://codesandbox.io/p/sandbox/interesting-sun-p8h6cu。

ウィジェットの最初の top と left の値は開始位置を正しく反映していますが、ドラッグした後に新しい位置を保持できません。

onDragEnd ハンドラーでウィジェットの位置を更新すると、ウィジェットの top スタイルと left スタイルが更新されます。 transform:translate を使用して Framer モーション経由でドラッグし、配置スタイルを更新すると、ウィジェットが生成されます:

1. DragEnd での新しい位置を正しく保持します
2. top left スタイルは transform:translate ドラッグ スタイルの効果を 2 倍にするため、前のポイントの後に UI 内を移動します。

transform:translate を使用しようとしましたが、機能しません。また、フレーマー モーションがドラッグされるとオーバーライドされ、さまざまな望ましくない動作が引き起こされると思います。