React-dnd: React DnDを使用しているのは誰ですか？

• プロジェクト： https ：//github.com/WikiEducationFoundation/WikiEduDashboard
• 有用性：非常に
• 問題：州主導のアニメーションが最も難しい部分でした。 最終的には、react-motionとreactcss遷移グループの組み合わせになりました。 次に、アニメーション中にドロップターゲットにならないように、アニメーションの途中であるものの追加の状態を管理する必要がありました。 最終的にhttps://github.com/yahoo/react-dnd-touch-backendを使用しました。これには、独自の問題（ドラッグ中にテキストが選択される）がありましたが、アニメーションの実行中はより制御しやすくなりました。 私はおそらく、この機能とアニメーションを正しくするために最大4営業日を費やしました。これは、非反応型アプリではおそらくかなり短い時間でした。

_- React DnDを使用している製品は何ですか？_

いろいろなアプリ（かんばんボード、基幹業務アプリ）で使っています

_-どのくらい役に立ちますか？_

React DnDの前に、私は見つけたすべてのDnDソリューションを、reactとjqueryベースの両方で試しましたが、ReactDnDは何マイルも先に出てきます。

_-どのくらいの頻度で問題が発生し、どれほどイライラしますか？_

1.0以降、問題は発生していません。 私は自分の製品で最新のブラウザのみをサポートしていることに注意してください。

_-どの機能に関心がありますか？_

私はすべての機能を、さまざまな分野でさまざまな組み合わせで使用しています。

_-製品のスクリーンショットをいくつか添付できますか？_

昨日それをプライベートプロジェクトと統合したところ（今は画面を表示できません、申し訳ありません）、既存のドキュメントはすばらしいと思いました。 アプローチはクリーンで、理解しやすく、拡張が簡単で、全体的にフレンドリーです。

正直なところ、キットで問題が発生したことはありません。 そのシンプルさが本当に最大の機能だと思います。さらに、HOCのようなベストプラクティスに向けて舵を切るためにそれを使用する人々を奨励します。

React DnDを使用している製品は何ですか？

TreasureDataの新しいWebコンソールで使用しています。 個人的なプロジェクトにも使用しました。

どれくらい役に立ちますか？

非常に便利。 これは、私が使用した中で最も優れたドラッグアンドドロップライブラリです。 高度なドラッグアンドドロップ操作を簡単に実装するために使用できると確信しています。

どのくらいの頻度で問題が発生し、どれほどイライラしますか？

ライブラリを使用するたびに、すべてがどのように組み合わされているか、つまり各部分がどこに行き、何をするのかを思い出すのに時間がかかります。 これは、何度も使用した後でも発生します。

おそらく、すべてのパーツを表示するための視覚化があると、覚えやすくなります。

全体として、図書館は私が必要とするすべてのことをしているようです。

どの機能に関心がありますか？

妥当性！ ドラッグアンドドロップに関する私の以前の経験はかなり貧弱で、ドラッグアンドドロップ関連のコードをテストした人は誰もいませんでした。

私はモバイルサポートを何もしていませんが、デスクトップとモバイルの両方をどのようにターゲットにするかわかりません。

私はreact-dnd-touch-backendを見てきましたが、両方をどのようにミックスするかわかりません。

製品のスクリーンショットをいくつか添付できますか？

https://gfycat.com/ScientificEvilAmericanbadger

これは基本的に私が遊んでいるだけです。 react-dndを使用すると、ファイルドロップゾーンを簡単に実装できます。

React DnDを使用している製品は何ですか？

codecks.ioはまだ開発中ですが、早期アクセスに近い

どれくらい役に立ちますか？

たくさん。 ブラウザの動作を正規化し、dndへの反応アプローチを提供することで、このライブラリは私にとって簡単なものになります

どのくらいの頻度で問題が発生し、どれほどイライラしますか？

ドキュメントは素晴らしいですが、それを使い始めたとき、エラーメッセージなしでは機能しないという驚くべき問題に遭遇しました。それを確実に再現することはできませんでしたが、おそらく高さゼロのドラッグターゲットに関係していました。

どの機能に関心がありますか？

ブラウザの正規化、タッチ操作のサポート

製品のスクリーンショットをいくつか添付できますか？

https://gfycat.com/CleanLegitimateAracari

私は、医用画像アーカイブの検索エンジンでの博士課程の研究でReactDnDを使用しました。 これにより、検索結果をドラッグしてクエリの一部にすることができます（類似した画像が生成されます）。 このようなライブラリがなかったら、HTML5 APIをいじって、Reactと一緒にうまく機能することを確認する必要がありました。 もっと重要なことに集中できるのは金です！

深刻な問題はありませんでしたが、0.xから1.xへの移行は非常に混乱し、distタグが適切に使用されなかった良い例です（1.0.0-rcは更新されずにlatestとしてリリースされました）ドキュメンテーション）。 とにかく、これはすべて橋の下の水です。 :)

1.0.0-rcは、更新されたドキュメントなしで最新のものとしてリリースされました

ええ、これは私がdist-tagsがどのように機能するかを学ぶ前でした。 ：喜び：

React DnDを使用している製品は何ですか？

ドラッグアンドドロップの相互作用が多いクライアントプロジェクトに使用します。 注目すべきコンポーネントのいくつかは次のとおりです。

• ノードを並べ替えてネストできるツリービュー
• Trelloに似たリスト/カードビューは、並べ替えのみをサポートします。

これはコラボレーションツールでもあるため、ほとんどのインターフェイス更新はソケットサーバーにディスパッチされます。

どれくらい役に立ちますか？

非常に便利です。ドラッグロジックをコンポーネントから分離して個別にテストするのは非常に簡単です。

どのくらいの頻度で問題が発生し、どれほどイライラしますか？

ネストと並べ替えをサポートするツリービューで多くの問題に直面しています。

私たちが経験した大きな問題の1つは、ネストと並べ替えをサポートするツリービューの実装でした。

さまざまなタイプのノード（フォルダー、リスト）があります。 ユーザーは、フォルダーに何かをドロップしてネストするか、別のノードの下または上に並べ替えることができます。 この相互作用には、多くのちらつき、バグのある動作、場合によってはパフォーマンスの低下が伴います。 このビデオを参照してください： http ：//s.2to1.be/fAtX、

それが機能する方法は次のとおりです。

1. ユーザーがノードのドラッグを開始すると、ノードはその位置に留まります
2. ユーザーがノードにカーソルを合わせる->新しい位置のインジケーターを表示します。この位置はreduxアクションでディスパッチされます。 （ツリー全体がアプリケーション状態の一部です）。
3. ユーザーはドラッグを終了し、サーバー上のノードの新しい位置を保持するアクションをディスパッチし、接続されているすべてのソケットクライアントに送信します。

現在、いくつかの数学（このリポジトリのソート可能な例のバリエーション）を使用して、ノードがフォルダーの上または下/上にあるかどうかを計算します。 最初はFolderコンポーネントをDropTargetにしようとしましたが、それがうまくいかなかったため、他のNode DropTargetを並べ替えることができませんでした

どの機能に関心がありますか？

• 妥当性
• バックエンドの切り替え
• イベントに夢中
• ブラウザのサポート

製品のスクリーンショットをいくつか添付できますか？

上のビデオをご覧ください

先週、（まだリリースされていない）教育用Webアプリにreact-dndを追加しました。 すごい！ あなたの仕事をどうもありがとう！

IMOの最大のメリットは、react-dndが、アプリ全体でDnD機能を管理するための適切なレベルの抽象化を提供することです。

孤立した、フリーサイズのすべてのドラッグコンポーネント（並べ替え可能など）の厄介な組み合わせを捨てることができることに加えて、以前は複雑すぎると書き留めていたドラッグベースの機能を数時間で追加することができました価値がある（たとえば、カードをドラッグしてリスト内で再ソートするか、ユーザーリストアイコンにドラッグしてユーザーリストを表示してから、適切なユーザーにドロップします）。

これまでに遭遇した唯一の問題はタッチバックエンドでしたが、前に進むためにすばやくハックすることができ、誰かがより一般的なプルリクエストに取り組んでいるとコメントしました。

すでに素晴らしいAPIを考えると、私が気にかけている主な機能は、しっかりとしたタッチのサポートです。

個人的に言えば、なぜ私はオープンソースプロジェクトのプルリクエストを行わないのですか（とにかく）...私はデザイナーです。 たとえば、私はこのツールを使用していますが、私の頭は当然、非常にさまざまな種類の問題について考えています。 このような図書館で発生する問題を解決するのが得意ではないことに加えて、それは実際には私が通常行う種類の作業ではなく、私の解決策を「信頼」しません。 ここにはある程度の利己心があることは知っていますが、フロントエンド開発でこのように行動するデザイナーも少なくないのではないかと思います。 アプリ開発の複雑さを製品設計の複雑さに近づけてドメイン間を移動する際の不快感を軽減するツールを使って、私のようなデザイナーを喜んで手伝ってくれるあなたのような人々にとても感謝しています。

参考までに、レイアウトの変更をアニメーション化するために、react-dndをreact-flip-moveと組み合わせて使用​​しています。 ほんの数日ですが、彼らは素晴らしいペアを組んでいるようです。

@arstin

これは完全に私の一日を作りました。 ：心臓：

_React DnDを使用している製品は何ですか？_
製品はまだ覆い隠されています。

_どのくらい役に立ちますか？_
非常に便利です。ドラッグアンドドロップの種類がたくさんあります。 コンポーネント内にDnDロジックを保持することは、私たちの脳がすべての複雑さを管理するのに役立ちました。

_どのくらいの頻度で問題が発生し、どれほどイライラしますか？_
登録するドロップターゲットの量が非常に多いため、パフォーマンスにいくつかの問題があります。 そうでなければ、それはうまくいきます！

_どの機能に関心がありますか？_
パフォーマンスとSVGの互換性。

製品のスクリーンショットをいくつか添付できますか？
完全ではありませんが、これにより、React-DnDで解決しようとしている問題がわかります。

このアプリケーションは、戦略ゲームのマップエディタのように機能します。 いくつかのルールに基づいて新しいアイテムをマップにドラッグアンドドロップしたり、マップ内でアイテムを移動したりすることもできます。 私たちはオンラインゲームを構築していません。代わりに、他のマッピングの問題を解決するためにいくつかのアイデアを使用しています（繰り返しますが、私はまだ言及することができません）。

素晴らしいライブラリをありがとうございました！

これは、reactを使用していて、dndを実行する必要がある場合に、命を救うものです。 すごい仕事！

トランスポート管理ソフトウェアでReactDNDを使用しています。 これまでのところ、まったく問題はありませんでした。

ユーザーは配達ストップをドラッグして、計算された距離で地図上に直接表示します。

React DnDを使用している製品は何ですか？

ドラッグアンドドロップのブロックベースのCMS（さらに別の内部ベータ版、4月にクライアント向けにリリース）

どれくらい役に立ちますか？

非常に。 APIは、他のサードパーティコンポーネントほど単純ではありませんが、非常に強力で、必要なことをすべて実行できます。

どのくらいの頻度で問題が発生し、どれほどイライラしますか？

まれに、それほどイライラすることはありません。

どの機能に関心がありますか？

安定性とクロスブラウザの防弾性。

製品のスクリーンショットをいくつか添付できますか？

React DnDを使用している製品は何ですか？

ドラッグアンドドロップを使用するすべての場所で、 AsanaWebアプリケーションでReactDnDを使用します。 現在、アプリケーションを社内のLunaフレームワークからReactに書き直しており、ドラッグアンドドロップを使用するすべての場所で、書き直し中にReactDnDを使用していることに注意してください。

どれくらい役に立ちますか？

非常に便利です。 APIは操作が簡単で、ドラッグアンドドロップをいくつかのコンポーネントに含めることで、関心の分離を明確にすることができます。

どのくらいの頻度で問題が発生し、どれほどイライラしますか？

最初の立ち上げを除いて、問題が発生することはあまりありません。 私たちはTypeScriptでReactDnDを使用しており、タイプ定義を書き出すことで、（プロセスでAPI全体を調査する必要があったため）立ち上げ期間が短縮されたと思います。 現在、私たちの問題は一般的にテストに関するものです（たとえば、テスト間のクリーンアップ、dndで装飾されたコンポーネントを操作するための社内ヘルパーなど）。 これは時々イライラすることもありますが、使用する汎用コンポーネントや、将来のコンポーネントのベースとなるサンプルコンポーネントがあるので、それほどではありません。

どの機能に関心がありますか？

パフォーマンス、関心の分離、テスト容易性

製品のスクリーンショットをいくつか添付できますか？

@epelzおそらく、asanaにスポンサーを依頼する必要があります。そうしないと、プロジェクトの速度が低下します。

defがreact-dndを使用するTrelloを作成するhttps://github.com/Asanaまたはhttps://github.com/FogCreekは、優れたスポンサーになる可能性があります。

@gaearonは、Facebookがスポンサーになっている方がいいです

React DnDを使用している製品は何ですか？

次世代のUI。

どれくらい役に立ちますか？

非常に！ 私はドキュメントが好きですが、もっと現実的な例を使うことができます。

どのくらいの頻度で問題が発生し、どれほどイライラしますか？

DragSourceでコンポーネントを装飾するときに、小道具が変更されたときにcomponentWillUpdateメソッドが実行されないという問題が発生しました。 とてもイライラするので、バグを報告する必要があると思います。 でもあなたではなく私だと思います。 ;）

どの機能に関心がありますか？

パフォーマンス、安定性、タッチサポート。

製品のスクリーンショットをいくつか添付できますか？

まだ恐れていませんが、リストを並べ替えたり、新しいリストからリストにドラッグしたりしていると思います。 ここにある他の例と比較すると、非常に単純です。

React DnDを使用している製品は何ですか？

@teleportでは、タスクの並べ替えと分類にZen （移動チェックリスト）製品のReactDnDを使用しています。

また、現在内部のプロジェクトで使用するために、ReactDnDを使用して実装されたDnDサポートを備えた再利用可能なツリービューコンポーネントreact-dnd-treeviewを構築しました。 最初はreact-ui-treeを使用しましたが、UXを正しく取得できず、React DnDで前向きな経験をしたので、独自に実装しました。 コンポーネントは非常に初期の段階であるため、ドキュメントやCIなどはまだありませんが、フィードバックをお待ちしています。

どれくらい役に立ちますか？

モデルを理解するのに少し時間がかかりましたが、デザインは本当にきれいで、DnDが必要なすべての場所で使用することにしました。 とても便利です。

どのくらいの頻度で問題が発生し、どれほどイライラしますか？

これまでに2つの問題がありました。

• タッチバックエンドでドラッグUXを正しく取得する（パフォーマンスを含む）
• 最初はJSでドロップエリアロジックを実装しようとしましたが、React DnDから適切なターゲット相対座標（ターゲットの上または下にドロップするかどうかを決定するため）を取得できないことに悩まされ、最終的に個別のオーバーレイDOM要素を作成することにしましたドロップターゲットとして。

どの機能に関心がありますか？

パフォーマンス、基盤となるブラウザ/プラットフォームの癖を隠します。

製品のスクリーンショットをいくつか添付できますか？

テレポート禅：

react-dnd-treeview：

React DnDを使用している製品は何ですか？
Discord- https: //discordapp.com-ゲーマー向けの音声およびテキストチャット

どれくらい役に立ちますか？
とても！

どのくらいの頻度で問題が発生し、どれほどイライラしますか？
まれに、5/10イライラします。

どの機能に関心がありますか？
現在のすべての機能。

Slackデスクトップクライアントにはほとんどreact-dndを使用していましたが、残念ながら2つの制限があり、それが取引を妨げるものであることが判明しました。

1. ドラッグロジック（つまり、ドラッグが進行中の場合のように、ドラッグ状態を計算するロジック）をカスタマイズすることはできません。
   
   
   
   • ドラッグ状態から注入された小道具の変更に応じて、コンポーネントを変更するのは非常に簡単です。 カスタムReactコンポーネントを使用してドラッグプレビューをカスタマイズすることもかなり簡単です。 ただし、残念ながら、ドラッグ操作に添付するデータは、カーソルに添付して追跡することしかできません。 これにより、現在サイドバーで使用しているようなユーザーエクスペリエンスが妨げられ、チームアイコンをドラッグして並べ替えることができ、それらのドラッグはy軸のみに制限されます。 react-dndを使用すると、ドラッグプレビューを1つの軸に簡単に制限できますが、ドラッグ時にカーソルにアタッチされたデータを制限することはできません。 これは、カーソルをサイドバーから水平方向に離しても、カーソルがドロップターゲットの上に垂直方向にある場合、react-dndはドロップターゲットをまったく応答させないことを意味します。 （react-dndなしで現在行われている動作については、以下のGIFを参照してください👇）
     
     
   
   
2. hoverで何かをしている場合、カスタムドラッグレイヤーを使用すると、通常のReactレンダリングループがブロックされます。 カスタムドラッグレイヤーが必要な場合は追加のReactコンポーネントを作成する必要があり、そのドラッグレイヤーは、dndモニターからのpropsの変更に応じてその位置を変更することで機能するため、 render()は最終的に次のようになります。 _たくさん_と呼ばれます。 これは、DragSourceをドラッグするときに、 hoverで他のコンポーネント（ほとんどの場合、他のドロップターゲット）を再レンダリングすることを計画している場合にのみ問題になります。 hoverの状態を非同期で変更し、ドロップターゲットが変更されていない場合はホバーの早い段階で戻ることで、これをいくらか軽減できましたが、ホバー中にドロップターゲットを変更すると、依然として顕著なラグがありました。

うまくいけば、そのフィードバックがお役に立てば幸いです。 Slackアプリでの使用を検討している間、react-dndでの作業を楽しんでいました。可能な限り、これらの制限を克服できることを望んでいます。

React DnDを使用している製品は何ですか？

Webページを作成する新しい方法であるtylioで使用します。 React-dndは、コンテンツをアップロードするページの前面と中央にあります。

どれくらい役に立ちますか？

非常に便利; すべての可動部分を一度に理解する必要があるため、最初は頭を包むのは少し難しいですが、カチッと音がするようになったら、準備は完了です。

どのくらいの頻度で問題が発生し、どれほどイライラしますか？

さまざまなサイズのアイテムを並べ替えて移動しているため、ケースは非常に複雑であり、フリップフロップを使用したくありません。 いくつか問題がありましたが、ライブラリ自体よりも使い方の方が多かったと思います。

どの機能に関心がありますか？

それらのほとんどすべて！ さまざまなタイプのドラッグソースとドロップターゲット、ネイティブファイル/ URL /テキスト、HTML5、およびカスタムドラッグレイヤーを備えたタッチバックエンドを使用します。

製品のスクリーンショットをいくつか添付できますか？

誰かがTypescriptでそれを使用する場合、基本的な例を提供できますか？ 私はこのエラーで立ち往生しました：

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

私はそれを次のように使用します：

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

チャイムを鳴らすには遅すぎるかどうかはわかりませんが、（できれば建設的な）フィードバックを提供したいと思いました。

React-DnDを把握（および実装）するのはやや難しいことがわかりました。 それは多くの可動部品を持っており、セットアップはかなり複雑です。 もっと「プラグアンドプレイ」なものが欲しいと思っていました。 そして、おそらくこれは、さまざまなこと（ターゲットのドラッグ/ドロップ、リストの並べ替えなど）を試みているためです。 しかし、私は別のアプローチをとることになりました。基本的には、各アイテムに上下ボタンを配置し、そのように並べ替えるだけで、 react-flip-moveを組み合わせて動きをアニメーション化しました。

リストの並べ替えのみに焦点を当て、それを機能させるために_超_シンプルに保つこのフォークを見たいと思います。

ReactとReduxを使用して構築された大規模なプロプライエタリ製品で使用し始めています。 react-dndを使用して、アプリ内のSVG要素を除くすべてのもののドラッグアンドドロップの側面を管理します。 ちょうどいい抽象化レイヤーがあります。 実際、Reactより前のコードについては、社内に非常によく似たものがあり、マウスイベントによってサポートされています。

私がreact-dndに望んでいることの1つは、マウスイベントに基づくバックエンドであり、SVG要素でも機能します。

ところで、 flow-typedの既存の定義が不完全であるため、TypeScript定義に基づいてフロータイプ定義を作成中です。

うわー、たくさんの入力！ これは通過するデータがたくさんあります！ この問題を解決します。 コメントを投稿してくださった皆様、ありがとうございました！

今後数週間でいくつかのドキュメントを更新する予定です。私の考えの1つは、ReactDNDを使用してプロジェクトとアプリケーションのショーケースを作成することです。 プロジェクトに取り掛かるときに、それらのプロジェクトをキャプチャするためのフォローアップ問題を作成します。

💜

@mnquintana非常に興味深いフィードバック-あなたとチームは、別のドラッグアンドドロップライブラリを使用することになりましたか、それとも完全にゼロから何かを構築することになりましたか？

@mnquintanaは、これを克服するためにあなたが何をしたかを学ぶのに本当に素晴らしいでしょう、あるいはもっと良いことに、slackに彼らのdndライブラリをリリースさせてください！

@epelzあなたの助けが必要です。 再利用可能なドラッグアンドドロップコンポーネントを作成して、ダッシュボードのカードとリスト内のアイテムをドラッグするか、カードとリストに別々のコンポーネントを使用しましたか。 返信していただければ幸いです。

これはかなり古いディスカッションスレッドであることは知っていますが、とにかく貢献したいと思いました。 Evernote
🐘現在、ビジネス向けの新しいSpaces製品にreact-dndを使用しています！ 私たちはたくさんのことを学びました。人々が興味を持っているなら、私たちが学んだことを共有しようとするかもしれません:)

React DnDを使用している製品は何ですか？
https://evernote.com/business

どれくらい役に立ちますか？
非常に便利！ それは急な学習曲線でしたが、私たちがやりたいことのほとんどを実行することができました。

どのくらいの頻度で問題が発生し、どれほどイライラしますか？
初心者には大きな障壁があり、扱いやすいものもあると思います。 ホバーとドロップの効果に関するいくつかのバグは私たちをかなり混乱させましたが、それを詳しく調べてみると、それらのいくつかはHTML5のドラッグアンドドロップのネイティブ実装の制限にすぎないようです（ドロップ効果は特に適用したいカーソルをオーバーライドするようですので、 cursor: no-dropのようなものを利用します。必要に応じて独自のバックエンドを実装できるように作成したのは本当に賢い方法であり、タッチバックエンドの実験にはまだ挑戦していません。

パーミッションにフックするのは興味深い時間でした。 メモのドラッグアンドドロップでは、何かを移動および/またはドロップできるかどうかを知るために多くのことが必要です。 また、CustomDragLayerに自分自身をドロップする場所が見つからなかった場合は、ネイティブのフェードアウトドラッグバックをメインのDOM要素に再実​​装する必要があることもわかりました（これは私たちが貢献できる例かもしれません）。

どの機能に関心がありますか？
私たちは複数のドラッグアンドドロップを実装しようとしていますが、私たちが知っていることから、React-Dndでそれを行うためのクリーンな方法があるようには見えませんか？ しかし、私たちはそれについてもっと調べています。 深く掘り下げると、より多くの情報を共有します。

@augbogを試したかどうかはわかりませんが、第14号の最初の投稿で、カスタムドラッグレイヤーを使用してgaeronの実装を調べましたか？

ある意味で、このシナリオはすでに可能です。消費者は、選択した要素を手動で追跡し、dragPreviewをある種の一般的なプレースホルダーImageに設定し、（ビジネスロジックに関する限り）いくつかの要素の削除に適切に対応できます。

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

ありがとう@JM-メンデスええ、私たちはそれを見て、複数のコンポーネントがドラッグされていることを認識していることに関するフォローアップコメントについて心配していましたが、それを読み直した後、実際には影響がない可能性があるため、まだ調査中です:)ありがとうその呼びかけのために！

クロスiframeDnDまたは親ウィンドウから子iframeへのドラッグ可能性のバックエンドはまだありません。 @gaearonいくつかのスレッドでこの問題に関するあなたのコメントを見ましたが、これが私のプロジェクトに純粋なjsソリューションを使用しなければならなかった唯一の理由であると言いたいです。

（編集）これは、ドラッグアンドドロップページビルダーを構築しようとしている人にとって本当に便利な機能だと思います。