React-dnd: Tanda plus hijau di Chrome

Dibuat pada 18 Mar 2016  ·  22Komentar  ·  Sumber: react-dnd/react-dnd

Adakah yang tahu cara menghilangkan tanda plus hijau yang muncul sesaat di awal operasi seret di Chrome?

dnd quicktime player today at 8 24 18 pm

Komentar yang paling membantu

event.dataTransfer.dropEffect = 'none'
event.dataTransfer.effectAllowed = 'none'

Ini berhasil untuk saya di chrome. Cukup letakkan di acara "dragstart" dan "dragend" karena hanya itu yang memiliki akses ke objek dataTransfer.

Semua 22 komentar

+1

Tidak dapat mereproduksi masalah ini di Chrome 49 di Mac, atau Chrome 49 di Windows di halaman ini: http://gaearon.github.io/react-dnd/examples-drag-around-naive.html

Apakah ini masih terjadi pada Anda? Versi Chrome apa yang Anda gunakan dan OS yang mana?

Selain itu, dapatkah Anda mengontrol perilaku kursor seperti yang dijelaskan di sini: http://gaearon.github.io/react-dnd/examples-customize-drop-effects.html?

Saya melihat masalah di semua contoh, di Chrome 49 di Mac (masih 10.10). Saat memulai tarik, kursor berubah menjadi tanda tambah hijau (biasanya ditampilkan oleh cursor: copy ); dan kemudian menjadi kursor "pindahkan".

Saya dapat mereproduksi ini secara sporadis dalam contoh Anda menautkan @globexdesigns (Chrome 49, OSX 10.11) - ini hanya muncul sebentar sebelum berperilaku seperti yang diharapkan.

Dugaan saya adalah bahwa itu adalah penundaan singkat antara siklus render batch React dan implementasi dnd browser (dalam hal ini kami mungkin dapat memperbaikinya) atau bug di Chrome. Saya akan bermain-main dengan browser lain (kecuali seseorang mengalahkan saya) dan melihat apakah saya bisa mendapatkan repro di sana.

Saya melihat hal yang sama di Chrome 49 OSX 10.11.4 - muncul sepersekian detik kemudian kembali normal. Perilaku tersebut tidak terjadi pada saya di Safari atau Firefox.

@EvNaverniouk Saya menggunakan Chrome 49 dan OS X 10.11.4 dan ya, masih melihat masalahnya, dan ya, saya melihat ikon salin salin saat diharapkan di tautan ini yang Anda rujuk http://gaearon.github.io/react -dnd / contoh-sesuaikan-drop-effects.html

Juga melihat masalah ini di Chrome 50 pada OS X 10.11.2.

juga melihat Chrome 51 ini di OS X 10.10.1

Saya juga melihat ini di Chrome Versi 51 pada OSX 10.11.4.

Edit: setelah menambahkan beberapa fungsionalitas lagi yang menerapkan lapisan seret dan memasukkan kode dengan benar menggunakan connectDragPreview dan getEmptyImage (), masalahnya tampaknya telah hilang untuk saat ini.

Saya telah melihat ini secara acak di React DnD serta pustaka lain dan bahkan hanya HTML5 mentah yang dapat diseret. Dugaan saya adalah bahwa ini ada hubungannya dengan kita tidak menyetel effectAllowed di dragstart.

Ada pembaruan tentang ini? Menghadapi masalah yang sama di Chrome 53 OSX 10.10.5

Melihat hal yang sama Chrome 54.0.2840.71 10.11.6, ada pembaruan?

+1

Menggunakan {dropEffect: 'copy'} menutupi masalah (dengan membuat tanda tambah hijau selalu terlihat); tetapi tidak memperbaikinya dengan benar.

Selain itu, tampaknya {dropEffect: 'move'} tampaknya tidak berhasil membuat kursor menjadi palang berujung 4.

Versi Chrome: 55.0.2883.95 (Build Resmi) (64-bit)

Menutup masalah ini karena tampaknya bukan merupakan fungsi dari perpustakaan ini.

@fredguest apakah Anda pernah menemukan solusi untuk ini?

@Yamikamisama sayangnya tidak ada.

Tombol tambah hijau tidak muncul untuk saya sampai fungsi canDrop saya mengembalikan false, lalu muncul.

event.dataTransfer.dropEffect = 'none'
event.dataTransfer.effectAllowed = 'none'

Ini berhasil untuk saya di chrome. Cukup letakkan di acara "dragstart" dan "dragend" karena hanya itu yang memiliki akses ke objek dataTransfer.

Ini tidak membantu saya

event.dataTransfer.dropEffect = 'none'
event.dataTransfer.effectAllowed = 'none'

Ini terjadi hanya untuk sesaat antara cursor: 'grab' dan cursor: 'grabbing'
Sayangnya itu tidak muncul dalam format gif tetapi gambar di bawah gif menunjukkan masalahnya

greenplus

screen shot 2018-08-01 at 12 57 15 pm

Saya juga mengalami masalah ini. Sepertinya ada bug di Chrome.

+1

+1 versi chrome 84.0.4147.89

edit: ini hanya terjadi ketika menggunakan kode berikut untuk tidak memiliki gambar pratinjau:

useEffect(() => {
    preview(getEmptyImage(), { captureDraggingState: true });
  }, [preview]);

menerapkan pratinjau memecahkan masalah ini

Apakah halaman ini membantu?
0 / 5 - 0 peringkat