ドラッグ可能な Framer Motion コンポーネントの位置を保持

Question

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

これは、フレーマーモーションで発生している問題を説明するコードサンドボックスです: 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 を使用しようとしましたが、機能しません。また、フレーマー モーションがドラッグされるとオーバーライドされ、さまざまな望ましくない動作が引き起こされると思います。

TLDR: Framer-motion のドラッグ機能を介してドラッグできる、絶対に配置されたコンポーネントを表示するのに問題があります

Answer 1

その通りです。フレーマーのドラッグ機能が x と y を変更しているため、top と left は 2 倍になります。次に、xy 変換を上と左に適用するため、予期しない結果が得られます。

#xx と y のみを変更する場合は、すべての同期が維持されるはずです。 リーリー ＃＃＃ の代わりに ＃＃＃ リーリー