Saya punya masalah sebaliknya. Untuk membuat backend HTML5 berfungsi dengan dropzone, saya harus melakukan:

beginDrag(props) {
  Dropzone.instances[0].disable() 

dan

endDrag(props, monitor, component) {
  Dropzone.instances[0].enable()

Dropzone saya dipasang ke bodi dan Anda mungkin ingin bermain-main dengan urutan pemasangannya.
Saya pikir membuatnya di seluruh tubuh dan kemudian mengambil tindakan berdasarkan tempat Anda meletakkan file bisa menjadi cara yang tepat untuk Anda jika tidak ada yang berhasil.

Saya juga mengalami masalah di mana item yang dapat diseret memiliki <input> , dan jika pengguna memilih / menyeret di dalamnya, item tersebut akan ditarik. Saya mungkin bisa mengembalikan false dari canDrag jika masukan difokuskan, dan itu akan berhasil.

Tidak yakin bagaimana cara mengatasi gangguan pada unggahan seret / lepas HTML. Saya sudah mengaktifkannya di seluruh tata letak. @ Gaearon , pikiran?

@ffxsam Apakah ini masih menjadi masalah bagi Anda?

Saya tidak tahu. Saya harus mencopot pemasangannya karena masalah ini, jadi saya tidak dapat memberi tahu Anda apakah ini masih menjadi masalah - maaf! Anda dapat menutup masalah ini jika Anda mau.

Hai, Saya baru saja mengalami masalah yang sama, saya akan membuka masalah tetapi saya melihat masalah tersebut sudah terbuka.
Jadi masalahnya adalah di mana pun Anda membuat instance ReactDnD, acara onDrop asli berhenti bekerja.
Saya memiliki kasus penggunaan yang sama, seluruh tubuh adalah 'dropzone' yang selalu mendengarkan file yang akan diseret, saya hanya menggunakan peristiwa asli untuk komponen itu karena fungsinya sangat sederhana dan keluar dari kotak. Tetapi pada tampilan saya memiliki ReactDnD yang berfungsi, acara drop tidak dipecat, dan lucu karena tidak menimpa acara onDragEnter atau onDragStart.
Adakah petunjuk @gaearon ? Saya benar-benar tidak ingin menghapus ReactDnD, ini adalah ketergantungan drag and drop terbaik untuk React sejauh ini.

@kesne @gaearon Saya mengalami masalah yang sama dengan @xavibonell . Saya pada dasarnya menggunakan React DND dengan Wordpress dan wordpress media uploader menggunakan event drop asli untuk upload file. Callback onDrop-nya tidak diaktifkan, hanya jika ReactDND digunakan dalam aplikasi. Menghapus target drop Reactdnd menyelesaikan masalah. Saya telah menghabiskan beberapa bulan pada proyek ini dan reactdnd adalah bagian intinya dan telah digunakan secara luas. Saya pasti tidak mampu pindah ke perpustakaan lain pada saat ini. Dari utas ini serta laporan serupa di Stack Overflow, saya melihat bahwa masalah ini telah ada cukup lama. Solusi apa pun untuk ini akan sangat dihargai.

Ya, kemungkinan ada interaksi yang buruk antara elemen native dan kustom dnd. Saya tidak punya banyak waktu untuk melihat masalah saat ini, tetapi saya berencana meluangkan waktu untuk proyek ini, dan ini akan menjadi salah satu masalah pertama yang saya selidiki.

Jika Anda bisa, akan sangat berguna untuk mendapatkan pengaturan repo minimal dengan contoh reproduksi sehingga kami dapat mencoba mencari cara terbaik untuk menangani ini.

@kesne Terima kasih banyak atas tanggapan Anda dan kami senang mengetahui bahwa Anda akan menyelidiki masalah ini. Saya pasti akan membuat contoh langsung untuk Anda dan memposting tautan di sini paling awal.
Sementara itu saya tampaknya telah menemukan peretasan sementara, belum mengujinya secara menyeluruh, tetapi tampaknya melakukan trik untuk saat ini. Saya perhatikan ada fungsi setup () dan teardown () di HTML5Backend, yang mengikat semua pendengar acara ke elemen jendela. Dalam kasus saya, pengunggah file wordpress adalah kotak modal yang menempati seluruh layar dan oleh karena itu tidak ada elemen ReactDND yang dapat diseret atau dijatuhkan saat modal dibuka. Jadi selama acara terbuka jendela modal saya memanggil fungsi teardown () pada instance backend (tersedia melalui DragDropManager) dan selama penutupan modal, saya memanggil fungsi setup (). Ini tampaknya berfungsi dengan baik tetapi dapatkah Anda memberi tahu saya jika memanggil fungsi pembongkaran dan penyiapan lagi dapat menyebabkan masalah lain dengan ReactDND pada komponen yang ada atau yang baru dirender?

ini masalahnya: https://github.com/react-dnd/react-dnd-html5-backend/blob/85fc956c58a5d1a9fde2fca3c7fca9115a7c87df/src/HTML5Backend.js#L452

berdasarkan komentar kode, "Jangan perlihatkan kursor yang bagus", sepertinya kode ini memperlakukan e.dataTransfer.dropEffect hanya sebagai properti tampilan. tetapi, menyetel dropEffect ke none sebenarnya tampaknya mencegah file dijatuhkan secara bersamaan. perlu dicatat bahwa menyetelnya ke move , copy , atau link berfungsi dengan baik. ini ada di Chrome 55.0.2.

kita sebenarnya bisa mereplikasi ini di luar react-dnd bersama-sama. Saya telah membuat biola yang mengisolasi masalah: https://jsfiddle.net/ypr6os00/8/

artikel MDN untuk dropEffect tampaknya menyarankan bahwa effectAllowed berfungsi sementara dropEffect harus presentasi. biola itu berbicara sendiri ...

sunting: ini adalah masalah yang sama dengan https://github.com/gaearon/react-dnd-html5-backend/issues/25

Saya dapat mengonfirmasi bahwa dalam kasus saya, cukup mengomentari e.dataTransfer.dropEffect = 'none'; (di https://github.com/react-dnd/react-dnd-html5-backend/blob/85fc956c58a5d1a9fde2fca3c7fca9115a7c87df/src/HTML5Backend.js#L452 ) memperbaiki masalah saya tentang react-dnd yang mengganggu peristiwa penurunan Dropzone saya.

Untuk referensi, saya memiliki pengaturan yang mirip dengan berikut ini:

<DragDropContextProvider backend={HTML5Backend}>
  <Dropzone>
    <DropTargetComponent />
    <OtherComponent>
      <DragSourceComponent1 />
      <DragSourceComponent2 />
      <DragSourceComponentN />
    </OtherComponent>
  </Dropzone>
</DragDropContextProvider>

Di mana DropTargetComponent = DropTarget(TYPE, target, collect)(Component) dan DragSourceComponent = DragSource(TYPE, source, collect)(Component) .

Apakah ada efek samping yang diketahui dari penambalan ini atau perbaikan yang lebih baik tersedia? Jika tidak, ini mungkin bisa digabungkan untuk selamanya?

Terima kasih atas semua kerja bagusnya , dan terima kasih

[EDIT]
Saya membuat garpu Github dan paket npm sampai masalah ini diselesaikan di proyek utama, jika itu berguna bagi siapa pun.

terima kasih atas solusinya

Saya menemukan bahwa menggunakan contoh react-dropzone untuk dropzone bersarang berfungsi. itu menghentikan propagasi, yang saya anggap masalahnya. itulah solusi saya sampai saya menemukan masalah ini hari ini

Saya mengalami masalah yang sama. Mengingat gagasan tentang dropzones bersarang, saya akhirnya membungkus komponen apa pun yang diunggah di dalam div dan menambahkan properti onDragOver ke div itu, yang hanya menghentikan propagasi. Ini sepertinya membuatnya berfungsi dalam kasus saya, inilah contohnya (saya menggunakan Filepond):

 handleDragOver (event) {
    console.log('dragged over ', event.dataTransfer)
    event.stopPropagation()
  }

  render () {
    return (
      <div onDragOver={this.handleDragOver}>
        <FilePond />
      </div>
    )
  }

Namun, tidak suka gagasan bahwa react-dnd dapat sangat mengganggu fungsi d & d pada komponen lain. Sepertinya kecelakaan besar, di mana beberapa komponen yang menggunakan react-dnd to d & d DOM-node dapat merusak fungsi d & d file drop di komponen lain. +1 untuk memperbaiki ini di perpustakaan

Mungkin beberapa solusi cepat bisa jadi, bahwa dropEffect bisa ditentukan entah bagaimana melalui rantai penyangga?

Saya akhirnya menggunakan garpu @silvainSayduck untuk backend HTML5. itu berhasil untuk saya. Sayangnya bug ini tidak diperbaiki di react-dnd secara langsung, tapi setidaknya ada solusi

Adakah peluang untuk segera memperbaikinya? @silvainSayuck, bisakah Anda membuka permintaan penarikan untuk perbaikan Anda?

Saya membuat permintaan tarik dari repo saya, tidak yakin ini banyak membantu (karena saya masih tidak tahu apakah mengomentari bahwa satu baris memiliki efek samping yang tidak diinginkan, atau bahkan jika itu memperbaiki masalah untuk semua kasus penggunaan).

1239

@darthtrevino Maukah Anda ikut serta sebagai kontributor untuk proyek ini?

Melihat PR, sepertinya masuk akal saya hanya perlu memverifikasi bahwa itu tidak sesuai dengan contoh

Digabung di # 1240

Terima kasih banyak @darthtrevino! Kapan ini akan dirilis dalam versi npm?

Pada akhirnya - ketika saya mendapatkan waktu untuk proyek ini, alur kerja saya yang biasa adalah mengerjakan sekumpulan PR dan kemudian memotong rilis.

@darthtrevino apakah itu tersedia dalam rilis saat ini? kapan akan tersedia?

Saya percaya itu dalam rilis saat ini, ya. Beri tahu saya jika Anda mengalami masalah

@darthtrevino terima kasih, ini tersedia.

Saya mengalami masalah yang sama. Mengingat gagasan tentang dropzones bersarang, saya akhirnya membungkus komponen apa pun yang diunggah di dalam div dan menambahkan properti onDragOver ke div itu, yang hanya menghentikan propagasi. Ini sepertinya membuatnya berfungsi dalam kasus saya, inilah contohnya (saya menggunakan Filepond):

 handleDragOver (event) {
    console.log('dragged over ', event.dataTransfer)
    event.stopPropagation()
  }

  render () {
    return (
      <div onDragOver={this.handleDragOver}>
        <FilePond />
      </div>
    )
  }

Namun, tidak suka gagasan bahwa react-dnd dapat sangat mengganggu fungsi d & d pada komponen lain. Sepertinya kecelakaan besar, di mana beberapa komponen yang menggunakan react-dnd to d & d DOM-node dapat merusak fungsi d & d file drop di komponen lain. +1 untuk memperbaiki ini di perpustakaan

Mungkin beberapa solusi cepat bisa jadi, bahwa dropEffect bisa ditentukan entah bagaimana melalui rantai penyangga?

tambahkan event.stopPropagation() pada handleDragOver [Dropzone] memperbaiki masalah dalam kasus saya. terima kasih @vileppanen

Benang ini menyelamatkan hidup saya

Bagi mereka yang mengalami masalah ini di mana <Dropzone /> berada di dalam komponen react-dnd , solusi yang sama berfungsi - membungkus <Dropzone /> dalam <div onDragOver={e=> e.stopPropagation() /> dengan onDragOver digunakan untuk menghentikan propagasi.