Kedudukan terpelihara untuk komponen Framer Motion yang boleh diseret
P粉449281068
P粉449281068 2024-03-31 22:29:49
0
1
451

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 topleft 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 处理程序中小部件的位置,该处理程序又更新小部件上的 topleft 样式。通过 Framer-motion 使用 transform:translate pada widget. Gunakan

melalui Framer-motion untuk menyeret dan mengemas kini gaya kedudukan, yang menghasilkan widget:
  1. Mengekalkan kedudukan baharunya dengan betul pada DragEnd
  2. top + left 样式使 transform:translateBergerak dalam UI selepas titik sebelumnya, kerana
  3. 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🎜
P粉449281068
P粉449281068

membalas semua(1)
P粉621033928

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

Jika anda hanya berubah xy, segala-galanya harus kekal selari.

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

bukannya

style={{ left: widget.x, top: widget.y }}
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan