React-dnd: Siapa yang menggunakan React DnD?

Dibuat pada 17 Feb 2016  ·  35Komentar  ·  Sumber: react-dnd/react-dnd

Dalam seminggu terakhir, saya menyelesaikan banyak masalah dan mendorong beberapa rilis tetapi sulit untuk melakukan ini secara terpisah dari memahami kebutuhan pengguna. Proyek ini memiliki banyak bintang tetapi ketika ada masalah, sulit untuk mengatakan berapa banyak orang yang terpengaruh, dan mengapa kami tidak mendapatkan lebih banyak permintaan tarik.

Basis kode tidak didokumentasikan dan dapat mengintimidasi orang luar, yang saya pahami dengan baik. Apakah ini alasan mengapa kami tidak mendapatkan lebih banyak permintaan untuk perbaikan? Atau karena proyek ini tidak digunakan secara luas seperti bintang yang membuat saya percaya?

Saya ingin meminta pengguna React DnD saat ini untuk check-in di sini untuk mengucapkan beberapa patah kata.

  • Di produk apa Anda menggunakan React DnD?
  • Seberapa berguna menurut Anda?
  • Seberapa sering Anda memiliki masalah dengan itu, dan seberapa frustasi mereka?
  • Fitur mana yang Anda pedulikan?
  • Bisakah Anda melampirkan beberapa tangkapan layar produk Anda?

Ini akan membantu saya memahami bagaimana proyek ini cocok dengan ekosistem, dan berapa banyak waktu luang saya yang layak dialokasikan untuk itu. Terima kasih!

announcement

Komentar yang paling membantu

Di produk apa Anda menggunakan React DnD?

Kami menggunakan React DnD di aplikasi web Asana , untuk semua tempat di mana kami menggunakan drag-and-drop. Perhatikan bahwa, kami sedang menulis ulang aplikasi kami dari kerangka kerja Luna internal kami ke React, dan menggunakan React DnD selama penulisan ulang di semua tempat di mana kami menggunakan drag-and-drop.

Seberapa berguna menurut Anda?

Kami merasa sangat berguna. API ini mudah untuk digunakan, dan memungkinkan kami untuk memisahkan masalah dengan jelas dengan menjaga drag-and-drop yang terkandung dalam beberapa komponen.

Seberapa sering Anda memiliki masalah dengan itu, dan seberapa frustasi mereka?

Selain peningkatan awal, kami tidak sering mengalami masalah dengannya. Kami menggunakan React DnD dengan TypeScript, dan saya pikir menulis definisi tipe mengurangi periode peningkatan bagi kami (karena kami harus menjelajahi seluruh API dalam prosesnya). Sekarang, masalah kami umumnya seputar pengujian (misalnya pembersihan di antara pengujian, helper internal untuk bekerja dengan komponen yang didekorasi dnd, dan seterusnya). Ini terkadang membuat frustrasi, tetapi sekarang kita memiliki beberapa komponen penggunaan umum untuk digunakan atau komponen contoh untuk mendasarkan komponen yang akan datang.

Fitur mana yang Anda pedulikan?

Performa, pemisahan kekhawatiran, kemampuan pengujian

Bisakah Anda melampirkan beberapa tangkapan layar produk Anda?

Drag to subtask
Dashboards

Semua 35 komentar

  • Proyek: https://github.com/WikiEducationFoundation/WikiEduDashboard
  • Kegunaan: Sangat
  • Masalah: Animasi yang digerakkan oleh negara adalah bagian tersulit. Saya berakhir dengan kombinasi reaksi-gerakan dan reaksi grup transisi css. Kemudian saya harus mengatur status ekstra untuk hal-hal yang berada di tengah-animasi untuk mencegahnya menjadi target jatuh saat menghidupkan. Saya akhirnya menggunakan https://github.com/yahoo/react-dnd-touch-backend , yang memiliki masalah sendiri (teks dipilih selama seret) tetapi animasi _during_ lebih dapat dikontrol. Saya mungkin menghabiskan ~4 hari kerja untuk fitur ini dan mendapatkan animasi yang benar, yang mungkin akan memakan waktu jauh lebih sedikit di aplikasi non-bereaksi.

feb 17 2016 07 34

_- Produk apa yang Anda gunakan untuk React DnD?_

Saya menggunakannya di berbagai aplikasi (papan Kanban, aplikasi lini bisnis)

_- Seberapa berguna menurut Anda?_

Sebelum React DnD, saya sudah mencoba semua solusi DnD yang bisa saya temukan, baik berbasis react maupun jquery, dan React DnD keluar bermil-mil di depan.

_- Seberapa sering Anda mengalami masalah dengannya, dan seberapa membuat frustrasinya?_

Sejak 1.0, saya belum menemukan masalah apa pun. Perlu dicatat bahwa saya hanya mendukung browser modern pada produk saya.

_- Fitur apa yang Anda pedulikan?_

Saya menggunakan semua fitur, dalam kombinasi yang berbeda di area yang berbeda.

_- Bisakah Anda melampirkan beberapa tangkapan layar produk Anda?_

image

Saya baru saja mengintegrasikannya kemarin dengan proyek pribadi (saya tidak dapat memberikan layar sekarang, maaf), dan saya menemukan dokumentasi yang ada luar biasa. Pendekatannya bersih, mudah dimengerti, sederhana untuk ditambahkan, dan ramah secara keseluruhan.

Saya belum benar-benar mengalami masalah dengan kit, jujur. Saya pikir kesederhanaannya benar-benar adalah fitur terbesar, ditambah lagi mendorong orang-orang yang menggunakannya untuk mengarahkan ke praktik terbaik seperti HOC.

Di produk apa Anda menggunakan React DnD?

Kami menggunakannya di konsol web baru kami di Treasure Data. Saya juga menggunakannya untuk proyek pribadi.

Seberapa berguna menurut Anda?

Sangat berguna. Ini adalah lib seret dan lepas terbaik yang pernah saya gunakan. Saya sangat yakin bahwa ini dapat digunakan untuk menerapkan interaksi seret dan lepas yang canggih dengan mudah.

Seberapa sering Anda memiliki masalah dengan itu, dan seberapa frustasi mereka?

Setiap kali saya menggunakan perpustakaan, saya perlu beberapa saat untuk mengingat bagaimana semuanya menyatu: ke mana setiap bagian pergi dan apa fungsinya. Ini terjadi bahkan setelah menggunakannya beberapa kali.

Mungkin memiliki visualisasi untuk menunjukkan semua bagian akan membuatnya lebih mudah untuk diingat.

Secara keseluruhan, sepertinya perpustakaan melakukan semua yang saya perlukan.

Fitur mana yang Anda pedulikan?

Kemampuan untuk diuji! Pengalaman saya sebelumnya dengan seret dan lepas agak buruk, dan tidak ada yang menguji kode terkait seret dan lepas mereka.

Saya belum melakukan dukungan seluler apa pun, tetapi saya tidak tahu bagaimana saya menargetkan desktop dan seluler.

Saya telah melihat react-dnd-touch-backend , tetapi saya tidak tahu bagaimana saya menggabungkan keduanya.

Bisakah Anda melampirkan beberapa tangkapan layar produk Anda?

https://gfycat.com/ScientificEvilAmericanbadger

Ini pada dasarnya hanya saya yang bermain-main. react-dnd membuatnya sepele untuk mengimplementasikan zona drop file.

Di produk apa Anda menggunakan React DnD?

codecks.io masih dalam pengembangan tetapi dekat dengan akses awal

Seberapa berguna menurut Anda?

Banyak. Menormalkan perilaku browser dan menawarkan pendekatan reaksi untuk dnd menjadikan perpustakaan ini bukan masalah bagi saya

Seberapa sering Anda memiliki masalah dengan itu, dan seberapa frustasi mereka?

Dokumentasinya bagus, tetapi ketika mulai bekerja dengannya, saya mengalami masalah mengejutkan di mana itu tidak berfungsi tanpa pesan kesalahan, saya tidak dapat mereproduksinya dengan andal tetapi mungkin ada hubungannya dengan target seret ketinggian nol.

Fitur mana yang Anda pedulikan?

Normalisasi browser, dukungan untuk interaksi sentuh

Bisakah Anda melampirkan beberapa tangkapan layar produk Anda?

https://gfycat.com/CleanLegitimateAracari

Saya telah menggunakan React DnD dalam pekerjaan PhD saya di mesin pencari untuk arsip pencitraan medis. Ini memungkinkan saya untuk menyeret hasil pencarian untuk menjadi bagian dari kueri (menghasilkan gambar serupa). Seandainya tidak ada perpustakaan seperti ini, saya harus dipusingkan dengan HTML5 API dan memastikannya bekerja dengan baik bersama React. Apa pun yang membuat saya fokus pada hal-hal yang lebih penting adalah emas!

Saya tidak mengalami masalah serius, tetapi transisi dari 0.x ke 1.x sangat membingungkan dan contoh yang baik di mana tag dist tidak digunakan dengan benar (1.0.0-rc dirilis sebagai latest tanpa diperbarui dokumentasi). Bagaimanapun, ini semua air di bawah jembatan. :)

1.0.0-rc dirilis sebagai yang terbaru tanpa dokumentasi yang diperbarui

Ya, ini sebelum saya mempelajari cara kerja tag dist. :sukacita:

Di produk apa Anda menggunakan React DnD?

Menggunakannya untuk proyek klien yang memiliki banyak interaksi seret dan lepas. Beberapa komponen yang menonjol adalah:

  • Tampilan pohon tempat Anda dapat mengurutkan dan membuat sarang
  • Tampilan daftar/kartu yang mirip dengan Trello, hanya mendukung pengurutan.

Ini juga merupakan alat kolaborasi sehingga sebagian besar pembaruan antarmuka dikirim ke server soket.

Seberapa berguna menurut Anda?

Sangat berguna, sangat mudah untuk memisahkan logika seret dari komponen Anda dan mengujinya satu per satu.

Seberapa sering Anda memiliki masalah dengan itu, dan seberapa frustasi mereka?

Kami menghadapi banyak masalah dengan tampilan struktur pohon yang mendukung penyarangan dan pengurutan,

Salah satu masalah besar yang kami alami adalah mengimplementasikan tampilan hierarki yang mendukung penyarangan dan pengurutan.

Kami memiliki berbagai jenis node (folder, daftar). Seorang pengguna dapat meletakkan sesuatu di folder yang akan menyebabkannya bersarang atau mengurutkannya di bawah atau di atas simpul lain. Interaksi ini disertai dengan banyak kedipan, beberapa perilaku buggy, dan terkadang penurunan kinerja. Lihat video ini: http://s.2to1.be/fAtX ,

Cara kerjanya adalah sebagai berikut:

  1. Pengguna mulai menyeret sebuah node, node tetap pada posisinya
  2. Pengguna mengarahkan kursor ke node -> menampilkan indikator posisi baru, posisi ini dikirim dengan tindakan redux. (seluruh pohon adalah bagian dari status aplikasi).
  3. Pengguna mengakhiri tarikan yang mengirimkan tindakan yang mempertahankan posisi baru node di server dan mengirimkannya ke semua klien soket yang terhubung.

Saat ini kami menggunakan beberapa matematika (variasi pada contoh yang dapat diurutkan dalam repo ini) untuk menghitung apakah sebuah node berada pada atau di bawah/di atas folder atau tidak. Awalnya saya mencoba membuat komponen Folder menjadi DropTarget tetapi itu tidak berhasil karena kemudian saya tidak dapat mengurutkan Node DropTarget yang lain

Fitur mana yang Anda pedulikan?

  • Kemampuan untuk diuji
  • Mematikan backend
  • Menghubungkan ke dalam acara
  • Dukungan peramban

Bisakah Anda melampirkan beberapa tangkapan layar produk Anda?

Lihat video di atas

Saya baru saja menambahkan react-dnd minggu lalu ke aplikasi web pendidikan (belum dirilis). Ini luar biasa! Terima kasih banyak atas pekerjaan Anda!

Kemenangan terbesar IMO adalah bahwa react-dnd menyediakan tingkat abstraksi yang tepat untuk mengelola fungsionalitas DnD di seluruh aplikasi.

Selain dapat membuang kombinasi canggung dari komponen drag yang terisolasi, satu ukuran untuk semua (dapat diurutkan, dll.), saya dapat menambahkan beberapa fungsionalitas berbasis drag dalam hitungan jam yang sebelumnya saya anggap terlalu rumit. agar sepadan (misalnya, menyeret kartu untuk mengurutkan ulang dalam daftarnya ATAU ke ikon daftar pengguna untuk menampilkan daftar pengguna, lalu menjatuhkannya ke pengguna yang sesuai).

Satu-satunya masalah yang saya hadapi sejauh ini adalah di backend sentuh, tetapi saya dapat melakukan peretasan cepat untuk bergerak maju dan seseorang berkomentar bahwa mereka sedang mengerjakan permintaan tarik yang lebih umum.

Fitur utama yang saya pedulikan mengingat API yang sudah luar biasa adalah dukungan sentuhan yang solid.

Berbicara secara pribadi tentang mengapa saya tidak membuat permintaan tarik untuk proyek sumber terbuka (sejauh ini, bagaimanapun)...Saya seorang desainer. Meskipun saya menggunakan alat ini, misalnya, kepala saya secara alami memikirkan jenis masalah yang sangat berbeda. Selain tidak pandai memecahkan masalah yang muncul di perpustakaan seperti ini, itu benar-benar bukan jenis pekerjaan yang biasanya saya lakukan dan saya tidak akan "mempercayai" solusi saya. Saya tahu ada beberapa keegoisan di sini, tetapi saya membayangkan ada lebih dari beberapa desainer yang juga kebetulan membuat kode dalam pengembangan front-end yang bertindak seperti ini. Saya sangat berterima kasih kepada orang-orang seperti Anda yang bersedia membantu desainer seperti saya dengan alat yang membawa kompleksitas pengembangan aplikasi menjadi lebih selaras dengan kompleksitas desain produk sehingga perpindahan antar domain tidak terlalu mengganggu.

FYI, saya menggunakan react-dnd dalam kombinasi dengan react-flip-move untuk menganimasikan perubahan tata letak. Baru beberapa hari, tapi mereka terlihat serasi.

@arstin

Ini benar-benar membuat hari saya. :jantung:

_Produk apa yang Anda gunakan untuk React DnD?_
Produk masih dirahasiakan.

_Seberapa berguna menurut Anda?_
Sangat berguna, kami memiliki banyak jenis drag and drop. Menjaga logika DnD dalam komponen telah membantu otak kita mengelola semua kerumitan.

_Seberapa sering Anda mengalami masalah dengannya, dan seberapa membuat frustrasinya?_
Kami memiliki beberapa masalah dengan kinerja karena banyaknya target penurunan yang kami daftarkan. Kalau tidak, itu berfungsi dengan baik!

_Fitur apa yang Anda pedulikan?_
Kinerja dan kompatibilitas SVG.

Bisakah Anda melampirkan beberapa tangkapan layar produk Anda?
Tidak sepenuhnya, tetapi ini akan memberi Anda gambaran tentang masalah yang kami coba selesaikan dengan React-DnD.

screenshot

Aplikasi ini berfungsi seperti editor peta permainan strategi. Anda dapat menarik dan melepas item baru ke peta berdasarkan sejumlah aturan dan juga memindahkan item di sekitar peta. Kami tidak sedang membangun game online, melainkan menggunakan beberapa ide untuk menyelesaikan masalah pemetaan lainnya (sekali lagi, saya belum bisa menyebutkannya).

Terima kasih banyak, sangat banyak untuk perpustakaan yang hebat!

Ini adalah penyelamat hidup jika Anda menggunakan reaksi dan harus melakukan hal-hal lain. Kerja bagus!

Saya menggunakan React DND dalam perangkat lunak manajemen transportasi kami. sejauh ini saya tidak ada masalah sama sekali.

pengguna menyeret pemberhentian pengiriman dan melihatnya langsung di peta dengan jarak yang dihitung.

tourstopmap

Di produk apa Anda menggunakan React DnD?

CMS berbasis blok drag-and-Dropy (beta internal lainnya, diluncurkan untuk klien pada bulan April)

Seberapa berguna menurut Anda?

Sangat. Meskipun API tidak _persis_ lurus seperti beberapa komponen pihak ketiga lainnya, ini sangat kuat dan benar-benar memungkinkan Anda melakukan apa pun yang Anda butuhkan.

Seberapa sering Anda memiliki masalah dengan itu, dan seberapa frustasi mereka?

Jarang dan tidak terlalu membuat frustrasi.

Fitur mana yang Anda pedulikan?

Stabilitas dan antipeluru lintas-browser.

Bisakah Anda melampirkan beberapa tangkapan layar produk Anda?

dnd-cms

Di produk apa Anda menggunakan React DnD?

Kami menggunakan React DnD di aplikasi web Asana , untuk semua tempat di mana kami menggunakan drag-and-drop. Perhatikan bahwa, kami sedang menulis ulang aplikasi kami dari kerangka kerja Luna internal kami ke React, dan menggunakan React DnD selama penulisan ulang di semua tempat di mana kami menggunakan drag-and-drop.

Seberapa berguna menurut Anda?

Kami merasa sangat berguna. API ini mudah untuk digunakan, dan memungkinkan kami untuk memisahkan masalah dengan jelas dengan menjaga drag-and-drop yang terkandung dalam beberapa komponen.

Seberapa sering Anda memiliki masalah dengan itu, dan seberapa frustasi mereka?

Selain peningkatan awal, kami tidak sering mengalami masalah dengannya. Kami menggunakan React DnD dengan TypeScript, dan saya pikir menulis definisi tipe mengurangi periode peningkatan bagi kami (karena kami harus menjelajahi seluruh API dalam prosesnya). Sekarang, masalah kami umumnya seputar pengujian (misalnya pembersihan di antara pengujian, helper internal untuk bekerja dengan komponen yang didekorasi dnd, dan seterusnya). Ini terkadang membuat frustrasi, tetapi sekarang kita memiliki beberapa komponen penggunaan umum untuk digunakan atau komponen contoh untuk mendasarkan komponen yang akan datang.

Fitur mana yang Anda pedulikan?

Performa, pemisahan kekhawatiran, kemampuan pengujian

Bisakah Anda melampirkan beberapa tangkapan layar produk Anda?

Drag to subtask
Dashboards

@epelz Anda mungkin harus meminta asana untuk mensponsorinya jika tidak, proyek akan melambat

baik https://github.com/Asana atau https://github.com/FogCreek , yang membuat Trello yang pasti menggunakan react-dnd, mungkin menjadi sponsor yang hebat.

@gaearon lebih baik lagi punya sponsor facebook

Di produk apa Anda menggunakan React DnD?

Generasi berikutnya dari UI kami.

Seberapa berguna menurut Anda?

Sangat! Saya suka dokumen tetapi bisa menggunakan lebih banyak contoh dunia nyata.

Seberapa sering Anda memiliki masalah dengan itu, dan seberapa frustasi mereka?

Baru saja mengalami masalah saat mendekorasi komponen dengan DragSource yang mencegah metode componentWillUpdate dijalankan saat props berubah. Sangat membuat frustrasi jadi saya rasa saya harus mengajukan bug. Saya kira itu saya dan bukan Anda. ;)

Fitur mana yang Anda pedulikan?

Dukungan kinerja, stabilitas, dan sentuhan.

Bisakah Anda melampirkan beberapa tangkapan layar produk Anda?

Belum, saya khawatir tetapi pikirkan daftar dengan menyusun ulang dan menyeret barang ke dalamnya dari daftar baru. Cukup sederhana dibandingkan dengan contoh lain di sini.

Di produk apa Anda menggunakan React DnD?

Kami di @teleport menggunakan React DnD di produk Zen (daftar periksa bergerak) kami untuk menyusun ulang dan mengkategorikan tugas.

Selain itu, kami baru saja membangun komponen tampilan pohon yang dapat digunakan kembali react-dnd-treeview dengan dukungan DnD yang diimplementasikan menggunakan React DnD untuk digunakan dalam proyek internal saat ini. Kami menggunakan react-ui-tree pada awalnya tetapi tidak bisa mendapatkan UX yang benar, dan kami memiliki pengalaman positif dengan React DnD, jadi kami mengimplementasikannya sendiri. Komponen ini masih dalam tahap awal, jadi belum ada dokumentasi, CI, dll. tetapi umpan balik apa pun akan diterima!

Seberapa berguna menurut Anda?

Meskipun butuh beberapa waktu untuk memahami modelnya, desainnya benar-benar bersih dan kami memutuskan untuk menggunakannya di mana pun kami membutuhkan DnD. Jadi, sangat berguna.

Seberapa sering Anda memiliki masalah dengan itu, dan seberapa frustasi mereka?

Sejauh ini kami memiliki 2 masalah:

  • mendapatkan UX seret yang benar dengan backend sentuh (termasuk kinerja)
  • awalnya saya mencoba menerapkan logika area drop di JS tetapi macet karena tidak bisa mendapatkan koordinat target-relatif yang tepat (untuk menentukan apakah akan turun di atas atau di bawah target) dari React DnD, akhirnya memutuskan untuk membuat elemen DOM overlay terpisah sebagai target jatuh.

Fitur mana yang Anda pedulikan?

Performa, menyembunyikan keunikan browser/platform yang mendasarinya.

Bisakah Anda melampirkan beberapa tangkapan layar produk Anda?

Teleportasi Zen:

reaksi-dnd-treeview:

Di produk apa Anda menggunakan React DnD?
Discord - https://discordapp.com - Obrolan suara dan teks untuk para gamer

Seberapa berguna menurut Anda?
Sangat!

Seberapa sering Anda memiliki masalah dengan itu, dan seberapa frustasi mereka?
Jarang, 5/10 membuat frustrasi.

Fitur mana yang Anda pedulikan?
Semua fungsi saat ini.

Kami hampir menggunakan react-dnd untuk klien desktop Slack , tetapi sayangnya mengalami dua batasan yang ternyata menjadi pemecah kesepakatan:

  1. Tidak mungkin untuk menyesuaikan logika seret (yaitu logika yang menghitung status seret, seperti saat seret sedang berlangsung).

    • Sangat mudah untuk mengubah komponen sebagai respons terhadap perubahan props yang disuntikkan dari status dragging. Ini juga cukup mudah untuk menyesuaikan pratinjau seret dengan komponen Bereaksi khusus. Namun sayangnya, data yang Anda lampirkan ke operasi seret hanya dapat dilampirkan dan mengikuti kursor. Ini menghalangi pengalaman pengguna seperti yang kami miliki saat ini dengan bilah sisi kami, di mana Anda dapat menyeret ikon tim di sekitar untuk menyusun ulang mereka, dan tarikan itu dibatasi hanya pada sumbu y. Dengan react-dnd, Anda dapat dengan mudah membatasi pratinjau seret ke satu sumbu, tetapi tidak mungkin untuk membatasi data yang dilampirkan ke kursor saat Anda menyeret. Ini berarti bahwa jika Anda memindahkan kursor menjauh dari bilah sisi secara horizontal, tetapi kursor masih secara vertikal "di atas" target penurunan, react-dnd tidak akan membiarkan target penurunan merespons sama sekali. (lihat GIF di bawah untuk mengetahui perilaku yang kita miliki saat ini tanpa react-dnd )

      untitled

  2. Menggunakan lapisan seret khusus memblokir loop render React biasa jika Anda melakukan sesuatu pada hover . Karena Anda harus membuat komponen React tambahan jika Anda menginginkan lapisan seret khusus, dan lapisan seret itu bekerja dengan mengubah posisinya sebagai respons terhadap perubahan props dari monitor dnd, render() akhirnya mendapatkan disebut _banyak_. Ini hanya masalah jika Anda berencana untuk merender ulang komponen lain (kemungkinan besar target penurunan lainnya) pada hover saat Anda menyeret DragSource Anda. Kami berhasil menguranginya dengan mengubah status pada hover secara asinkron dan kembali lebih awal saat mengarahkan kursor jika target penurunan tidak berubah, tetapi masih ada jeda yang terlihat saat mengubah target penurunan saat mengarahkan kursor.

Semoga umpan balik itu bermanfaat! Saya menikmati bekerja dengan react-dnd saat saya mencari kemungkinan menggunakannya di aplikasi Slack, dan saya ingin melihatnya mengatasi keterbatasan ini jika memungkinkan.

Di produk apa Anda menggunakan React DnD?

Kami menggunakannya di tylio , cara baru untuk membuat halaman web. React-dnd berada di depan dan tengah halaman tempat Anda mengunggah konten.

Seberapa berguna menurut Anda?

Sangat berguna; Agak sulit untuk membungkus kepala Anda di sekitarnya pada awalnya, karena Anda perlu memahami semua bagian yang bergerak sekaligus, tetapi begitu klik, Anda siap melakukannya.

Seberapa sering Anda memiliki masalah dengan itu, dan seberapa frustasi mereka?

Kasing kami cukup rumit, karena kami menyusun ulang dan memindahkan barang dengan ukuran berbeda, dan kami tidak ingin barang itu terbalik. Saya memiliki beberapa masalah dengannya, tetapi saya kira itu lebih pada cara menggunakannya daripada perpustakaan itu sendiri.

Fitur mana yang Anda pedulikan?

Hampir semuanya! Kami menggunakan berbagai jenis sumber drag dan drop target, file / url / teks asli, HTML5 & backend sentuh dengan lapisan drag kustom.

Bisakah Anda melampirkan beberapa tangkapan layar produk Anda?

capture d ecran 2016-07-07 a 10 35 58

Jika ada yang menggunakannya dengan TypeScript, dapatkah Anda memberikan contoh dasar? Saya terjebak dengan kesalahan ini:

decorateHandler.js:13 Uncaught TypeError: Cannot call a class as a function

Saya menggunakannya dengan cara ini:

@DragSource(ItemTypes.IDEA,ideaSource,(connect:DragSourceConnector, monitor: DragSourceMonitor)=>{ return { connectDragSource:connect.dragSource(), isDragging:monitor.isDragging() }; })(Idea) export class Idea extends React.Component<IIdeaProps,{}>{...}

Saya tidak tahu apakah sudah terlambat untuk bergabung, tetapi saya ingin memberikan beberapa (semoga konstruktif) umpan balik.

Saya menemukan React-DnD agak sulit untuk dipahami (dan diimplementasikan). Ini memiliki banyak bagian yang bergerak dan pengaturannya cukup terlibat. Saya berharap untuk memiliki sesuatu yang lebih "plug-n-play." Dan mungkin ini karena mencoba banyak hal yang berbeda (seret/lepas target, daftar ulang pemesanan, dll). Tapi saya akhirnya mengambil pendekatan yang berbeda, yang pada dasarnya hanya meletakkan tombol atas/bawah pada setiap item dan mengatur ulang seperti itu, dikombinasikan dengan react-flip-move untuk menganimasikan gerakan.

Saya ingin melihat garpu ini yang hanya berfokus pada pemesanan ulang daftar, dan membuatnya _super_ sederhana untuk membuatnya berfungsi.

Kami mulai menggunakannya pada produk berpemilik skala besar yang dibuat menggunakan React dan Redux. Kami menggunakan react-dnd untuk mengelola aspek seret dan lepas dari semua hal kecuali elemen SVG di aplikasi. Ini memiliki lapisan abstraksi yang tepat. Faktanya, kami memiliki sesuatu yang sangat mirip untuk kode yang mendahului React dan didukung oleh event mouse.

Satu hal yang saya harap react-dnd miliki adalah backend yang didasarkan pada peristiwa mouse sehingga berfungsi untuk elemen SVG juga.

Btw, saya sedang dalam proses menulis definisi flowtype untuknya berdasarkan definisi TypeScript-nya , karena yang ada di flow-typed tidak lengkap.

Wah, banyak masukan! Ini adalah banyak data yang harus dilalui! Saya akan menutup masalah ini. Terima kasih kepada semua orang yang telah meluangkan waktu untuk mengirimkan komentar!

Saya berencana memperbarui beberapa dokumentasi dalam beberapa minggu ke depan, dan salah satu pemikiran saya adalah membuat sebuah karya untuk proyek dan aplikasi menggunakan React DND. Saya akan membuat masalah tindak lanjut untuk menangkap proyek-proyek itu ketika saya mulai mengambil proyek itu!

@mnquintana Umpan balik yang sangat menarik- apakah Anda dan tim akhirnya menggunakan pustaka seret dan lepas lain atau hanya membangun sesuatu yang sepenuhnya dari awal?

@mnquintana akan sangat luar biasa untuk mempelajari apa yang Anda lakukan untuk mengatasi ini, atau lebih baik lagi, slack merilis perpustakaan dnd mereka!

@epelz Butuh bantuan Anda. Sudahkah Anda membuat komponen seret dan lepas yang dapat digunakan kembali untuk menyeret kartu di dasbor dan item dalam daftar atau menggunakan komponen terpisah untuk kartu dan daftar. Saya akan sangat menghargai jika Anda dapat menjawab.

Saya tahu ini adalah utas diskusi yang cukup lama tetapi tetap ingin berkontribusi. Evernote
menggunakan reaksi-dnd sekarang untuk produk Spaces baru kami untuk bisnis! Kami telah belajar banyak dan mungkin mencoba membagikan apa yang telah kami pelajari jika orang tertarik :)

Di produk apa Anda menggunakan React DnD?
https://evernote.com/business

Seberapa berguna menurut Anda?
Sangat berguna! Itu adalah kurva belajar yang curam tetapi kami membuatnya melakukan sebagian besar dari apa yang ingin kami lakukan.

Seberapa sering Anda memiliki masalah dengan itu, dan seberapa frustasi mereka?
Saya merasa ada beberapa hambatan besar untuk pemula dan beberapa hal menarik untuk ditangani. Beberapa bug mengenai efek hover dan drop membuat kami cukup bingung tetapi melihat lebih jauh ke dalamnya, tampaknya beberapa di antaranya hanyalah batasan dengan implementasi asli Drag/Drop HTML5 (efek drop secara khusus tampaknya menimpa kursor yang ingin Anda terapkan sehingga kami dapat' t mengambil keuntungan dari hal-hal seperti cursor: no-drop Sangat cerdas Anda membuatnya sehingga Anda dapat mengimplementasikan backend Anda sendiri jika perlu dan kami belum berani bereksperimen dengan backend sentuh.

Kami memiliki waktu yang menarik untuk mengaitkan izin. Seret dan lepas kami untuk catatan membutuhkan banyak hal untuk mengetahui apakah kami dapat memindahkan dan/atau menjatuhkan sesuatu. Kami juga menemukan bahwa kami harus mengimplementasikan kembali fade-out-drag-back asli ke elemen DOM utama ketika tidak menemukan tempat untuk meletakkan diri kami di CustomDragLayer kami (ini mungkin contoh yang dapat kami sumbangkan).

Fitur mana yang Anda pedulikan?
Kami ingin mengimplementasikan beberapa drag-and-drop dan sepertinya tidak ada cara bersih untuk melakukannya dengan React-Dnd dari apa yang kami ketahui? Namun kami lebih mendalaminya. Saat kami menyelam lebih dalam, kami akan berbagi lebih banyak.

apr-06-2018 13-26-25

@augbog tidak yakin apakah Anda sudah mencobanya, tetapi apakah Anda sudah melihat implementasi gaeron di posting pertama di edisi # 14 dan menggunakan lapisan seret khusus?

Di satu sisi, skenario ini sudah dimungkinkan: konsumen dapat secara manual melacak elemen yang dipilih, mengatur dragPreview ke beberapa jenis image placeholder generik dan bereaksi dengan tepat terhadap penurunan (sejauh menyangkut logika bisnis) beberapa elemen.

https://react-dnd.github.io/react-dnd/examples-drag-around-custom-drag-layer.html

Terima kasih @JM-Mendez ya kami melihatnya dan kami khawatir tentang komentar tindak lanjut tentang memiliki beberapa komponen yang sadar bahwa mereka sedang diseret tetapi setelah membaca ulang, itu sebenarnya mungkin tidak memengaruhi kami jadi kami masih memeriksanya :) Terima kasih untuk panggilan itu!

Masih tidak ada backend untuk lintas iframe DnD atau jendela induk ke draggability iframe anak. @gaearon Saya melihat komentar Anda mengenai masalah ini di beberapa utas, saya ingin mengatakan bahwa ini adalah satu-satunya alasan saya harus menggunakan solusi js murni untuk proyek saya.

(Sunting) Saya pikir ini adalah fitur yang sangat berguna bagi siapa saja yang mencoba membuat pembuat halaman seret dan lepas.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat