Kedudukan terpelihara untuk komponen Framer Motion yang boleh diseret

Question

Saya sedang mencipta papan pemuka widget di mana anda boleh mengalihkan widget, matlamat saya adalah untuk mengekalkan kedudukan widget selepas menyeretnya supaya ia boleh dimuatkan dalam kedudukan yang sama pada sesi akan datang.

Berikut ialah codesandbox yang menggambarkan isu yang saya hadapi dengan framer-motion: https://codesandbox.io/p/sandbox/interesting-sun-p8h6cu.

Nilai awal

pada widget top 和 left betul mencerminkan kedudukan permulaannya, tetapi saya tidak dapat mengekalkan kedudukan baharunya selepas menyeretnya.

Saya sedang mengemas kini kedudukan widget dalam pengendali onDragEnd, yang seterusnya mengemas kini gaya onDragEnd 处理程序中小部件的位置，该处理程序又更新小部件上的 top 和 left 样式。通过 Framer-motion 使用 transform:translate pada widget. Gunakan

melalui Framer-motion untuk menyeret dan mengemas kini gaya kedudukan, yang menghasilkan widget:

Mengekalkan kedudukan baharunya dengan betul pada DragEnd
2. top + left 样式使 transform:translateBergerak dalam UI selepas titik sebelumnya, kerana
kesan gaya seretan berganda.

transform:translateSaya tidak tahu bagaimana untuk menyelesaikan masalah ini. Saya cuba menggunakan

untuk kedudukan awal tetapi ia tidak berfungsi. Selain itu, sekarang saya fikir gerakan pembingkai mengatasinya sebaik sahaja ia diseret, menyebabkan tingkah laku yang tidak diingini berbeza.

TLDR: Saya menghadapi masalah memaparkan komponen kedudukan mutlak yang boleh diseret melalui fungsi seret Framer-motion🎜

Answer 1

Anda betul,top 和 left 会加倍，因为 Framer 拖动功能正在改变 x 和 y . Memandangkan anda kemudian menggunakan transformasi xy ke bahagian atas dan kiri, anda mendapat hasil yang tidak dijangka.

Jika anda hanya berubah x 和 y, segala-galanya harus kekal selari.

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

bukannya

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