React-dnd: DragPreview salah di Chrome

Dibuat pada 19 Jul 2017 · 20Komentar · Sumber: react-dnd/react-dnd

1) Tangkapan layar di bawah ini menunjukkan masalah aneh terkait dragPreview. Dalam kasus saya, simpul baris tabel yang dapat diseret adalah sumber dan target. Untuk beberapa alasan, pratinjau seret tidak hanya berisi tangkapan layar simpul sumber, tetapi juga semua baris di bawah ini! Pada saat yang sama operasi drag dipanggil hanya untuk 1 sumber dan swap di drop handler berfungsi dengan baik.

2) Juga ada kesalahan aneh yang terhubung dengan debugging: ketika saya menempatkan breakpoint ke dalam metode render simpul dragSource dan terus menjalankan aplikasi, saya mendapatkan kesalahan selama drag

Uncaught Error: Tidak dapat memanggil hover setelah drop.
di invarian (browser.js?72b5:40)
di DragDropManager.hover (dragDrop.js?3115:111)
di Object.eval [sebagai hover] (DragDropManager.js?b07f:92)
di HTML5Backend.handleTopDragEnter (HTML5Backend.js?5f50:495)

Tetapi masalah dengan dragPreview yang dijelaskan di atas menghilang dan drag-drop berfungsi dengan baik (satu kali). Kemudian di suatu tempat setelah drop event 'Cannot call beginDrag while dragging' terjadi kesalahan dan drag stop untuk bekerja sama sekali.

Kesalahan Tidak Tertangkap: Tidak dapat memanggil beginDrag saat menyeret.
di invarian (browser.js?72b5:40)
di DragDropManager.beginDrag (dragDrop.js?3115:50)
di Object.eval [sebagai beginDrag] (DragDropManager.js?b07f:92)
di HTML5Backend.handleTopDragStart (HTML5Backend.js?5f50:361)

Bug hanya muncul di Chrome (57 dan 59). Ada ide?

Sumber

tTwisTt

👍8

Komentar yang paling membantu

saya menyelesaikan masalah ini di chrome dengan menambahkan transform: translate3d(0, 0, 0) ke elemen yang mengandung saya.

RahulRameshNarayan pada 27 Nov 2018

👍51 ❤11 🎉10 🚀6 👀1

Semua 20 komentar

@tTwisTt Saya menghadapi masalah ini, apakah Anda menemukan

kaiomagalhaes pada 2 Okt 2017

@kaiomagalhaes Dalam kasus saya, saya mendapatkan masalah ini karena salah satu elemen anak dari baris (konten sel) sebenarnya memiliki tinggi yang lebih besar dari tinggi baris, tetapi disembunyikan oleh visibilitas: tersembunyi di css. Jadi dragSource memiliki lebar baris dan tinggi kontrol tersembunyi. Saya harap Anda akan menemukan ini bermanfaat.

tTwisTt pada 4 Okt 2017

👍1

@tTwisTt Saya dapat mengkonfirmasi itu, hal yang sama terjadi dengan overflow: hidden. apakah ada cara untuk menyeret elemen seperti ini tanpa pratinjau yang salah?

matthiaskrieft pada 4 Okt 2017

👍12

Masalah ini sudah ditutup, tetapi tampaknya masih menjadi masalah, bukankah harus dibuka kembali?

canastro pada 2 Okt 2018

Saya juga memiliki masalah yang sama - ketika saya mulai menyeret pratinjau terlalu besar dan tidak menghormati bagian yang harus disembunyikan oleh overflow.
Di sini Anda dapat melihat bagaimana saya menyeret elemen tetapi "batas" yang tersisa di sebelahnya juga merupakan bagian dari pratinjau.

EDIT: Saya dapat memperbaikinya dengan tidak menggunakan gambar yang diposisikan relatif di elemen tetapi sebagai gantinya div dengan gambar latar belakang.
Jadi sepertinya elemen img dalam yang menjangkau orang tua menyebabkan masalah.

olee pada 5 Okt 2018

Saya mengalami masalah serupa ketika saya mencoba dan menyeret bahan yang dibungkus div ui Expansion Panel yang diciutkan, akhirnya memberi saya pratinjau yang merupakan ketinggian panel yang diperluas tetapi menyertakan elemen dari halaman di sekitar panel, karena bagian yang terlihat panel lebih kecil dari pratinjau.

willbuckingham pada 30 Okt 2018

saya menyelesaikan masalah ini di chrome dengan menambahkan transform: translate3d(0, 0, 0) ke elemen yang mengandung saya.

RahulRameshNarayan pada 27 Nov 2018

👍51 ❤11 🎉10 🚀6 👀1

@RahulRameshNarayan ini juga bekerja untuk saya. TERIMA KASIH!
Adakah yang tahu mengapa ini memperbaiki masalah ??

jsyvino pada 27 Nov 2018

@jsyvino ini adalah masalah

Mari Bermain Dengan CSS yang Dipercepat Perangkat Keras-
https://www.smashingmagazine.com/2012/06/play-with-hardware-accelerated-css/

Perenderan Dipercepat di Chrome
https://www.html5rocks.com/en/tutorials/speed/layers/

Sederhanakan Kompleksitas Cat dan Kurangi Area Cat
https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas

RahulRameshNarayan pada 4 Des 2018

👍2

transform3d(0,0,0) memperbaiki masalah tangkapan layar seluruh halaman tetapi memiliki posisi elemen yang salah.
DragIssue

Masalah ini hanya pada browser berbasis chromium.
Apakah ada yang memiliki masalah serupa dan bagaimana Anda memperbaikinya?

makr11 pada 12 Jun 2019

👍10

Saya juga mendapatkan masalah ini di Chrome 75 saat menggunakan Material-UI ListItem sebagai simpul yang dapat diseret. Saya pikir elemen Ripple yang dikandung oleh overflow: hidden adalah penyebab ketidakcocokan ukuran.

Seperti yang disebutkan @makr11 , perbaikan @RahulRameshNarayan entah bagaimana menyelesaikan ini (dengan menyembunyikan elemen di sekitarnya dari pratinjau seret, tampaknya), masih memiliki posisi offset yang seolah-olah elemen tersebut terlihat, jadi masih 'rusak ' Menurut pendapat saya.

Adakah yang mengerti apa masalah mendasarnya di sini, tampaknya di tingkat pembuatan pratinjau seret DOM atau Native/HTML5 mungkin? Akan senang untuk mengatasi memperbaiki ini dengan benar.

mismith pada 12 Jun 2019

👍2

Sama di sini, saya mendapatkan masalah ini di Chrome 75, di Firefox berfungsi dengan baik ... Ini harus dibuka kembali!

faraonkicu pada 26 Jun 2019

👍1

Kasus penggunaan saya spesifik tetapi mungkin itu akan membantu seseorang, saya menggunakan dasbor kecepatan yang menggunakan react-dnd, dan di dalam widget (yang merupakan komponen yang dapat diseret) dirender react-chart-js. Masalah terjadi ketika chart-js dirender di dalam widget. Saya baru saja mengatur bahwa ketika widget dapat diseret, div dasar dirender di dalam widget dan bukan komponen chart-js.

Sekali lagi, ini cukup spesifik dan saya bukan ahli untuk subjek ini, tetapi mungkin ini akan membantu seseorang.

makr11 pada 28 Jun 2019

Masalah masih direproduksi (Chrome 75.0.3770.100 ) tetapi diselesaikan dengan menambahkan transform: translate3d(0) untuk mengandung elemen. Terima kasih @RahulRameshNarayan

artem-tkachenko pada 10 Jul 2019

👍1

Saya juga mengalami kesulitan yang sama. Saya mencoba menyelesaikannya dengan menambahkan transform: translate3d(0, 0, 0) , tetapi memiliki masalah yang sama dengan @makr11 di sini: https://github.com/react-dnd/react-dnd/issues/832#issuecomment -501292272