問題タブ [react-dnd]

ドキュメントページの例を通してReactDnDを学んでいます: (gaearon.github.io/react-dnd/examples-dustbin-single-target.html)

私が遭遇した問題は、ReactDnD タッチ バックエンドを使用すると DragSource コンポーネントが消え、DropTarget が DropSource のドラッグ イベントのみを検出するように見えることです。HTML5 バックエンドで期待どおりに動作します。

問題のデモ (ReactDnD ページのごみ箱の例を使用し、例のソース コードを HTML5Backend から TouchBackend に変更するだけです): https://make2514.github.io/ (このリンクをモバイル デバイスでテストしてください - TouchBackend はデスクトップでは動作しませんデフォルトではブラウザ）

私は以下からのみ変更します: export default DragDropContext(HTML5Backend)(EditorApp); (ReactDnD はここで期待どおりに動作します) to: export default DragDropContext(TouchBackend)(EditorApp); （上記の問題に遭遇しました）

これは、問題のソースコードがある私の github リポジトリです: https://github.com/make2514/Test-TouchBackend-ReactDnD

質問: ReactDnD ダストビンの例がモバイル デバイスで適切に動作するために、(HTML5Backend を TouchBackend に変更する以外に) 何かを変更する必要がありますか?

TouchBackend を使用した ReactDnD がモバイルで適切に動作する問題またはデモに関する情報を提供していただければ、本当に感謝しています。

以下は、私のドラッグ ソース仕様の canDrag メソッドです。

問題は、monitor.getInitialClientOffset が null を返すことです。getInitialSourceClientOffset と getClientOffset もそうですか? この時点でマウスの位置を取得する方法についてのアイデアはありますか?

monitor.getDropResult()null を返します (console.log を見ます)。オブジェクト（ドラッグされたアイテム）とその位置を返す必要があります。null を返すのはなぜですか?

コンポーネントに DragSource,DropTarget .. で署名しますが、それでも null が返されます

コンポーネントコード全体は次のとおりです。

React DnD の基本的な例をプロジェクトに (概念実証として) 適用しようとしていますが、いくつかの問題が発生しています。私はこの例を使用しています - https://github.com/gaearon/react-dnd/tree/master/examples/02%20Drag%20Around/Naive。ボックス内のいくつかの div をドラッグするだけです。

したがって、基本的にはページ全体 (これは最初に POC をテストするためのものです) である外部コンポーネント (注: これは実際のドラッグ コンポーネントから数レベル上のコンポーネントです) があります。

@ の定数の代わりに今のところ文字列を使用するだけで、examples コンテナーにかなり近くなりDropTargetます。getBuilders は、内部の他のコンポーネントをレンダリングするだけです。DragSource コンポーネントを作成する前にこのコンポーネントを実行したところ、すべて正常に動作していました。

したがって、いくつかのコンポーネントを下にドラッグできるようにしたいコンポーネントに反応する DnD 構文を追加しました。

これで、コンソールでこのエラーが発生します（アプリもレンダリングを停止しています）。

奇妙なことに、dragsource はまだ dom に呼び出されていないため、このエラーをどこから開始すればよいかわかりません。ご意見やご提案をいただければ幸いです。ありがとう！

カードの 2 つのリスト間でドラッグ アンド ドロップできるようにしたい。

単純な並べ替え可能な例に基づいて、カードを使用して 2 つのリストを作成し、それらの間でドラッグ アンド ドロップすることに成功しました。

リストの 1 つが完全に空の場合、何らかの理由でカードをドロップできません。

このスニペットは私の問題を示しています:

リストが空のときに方法がわかりません。カードをそこにドロップできません。

私はreact-dnd documentationに従っているreact dndプロジェクトに取り組んでいます。すべて正常に動作していますが、ドラッグ中にスクロールできません。

アイテムをドラッグしていて、最後のドロップ可能なソースに到達するとスクロール バーが必要になり、自動スクロールしてそこにアイテムを配置できるようになります。

誰かがこれを行う方法を知っている場合は、私と共有してください。とても感謝しています。

Typescript をサポートするこのライブラリを使用していると述べている一部のユーザーを読みましたが、どこにもドキュメントが見つからず、自分で動作させることもできないようです。

私は typescript 2 を使用していますが、既存のコンポーネントをドラッグするだけの非常に単純な作業例を作成することができません。いくつかの可能性を試しましたが、DragSource を (デコレーターまたは関数として) 呼び出すとき、または結果のコンポーネントをレンダリングするときに、型付けに関するいくつかの問題に常に遭遇します。

要するに、おそらくコンポーネント自体を変更せずに、既存のコンポーネントをドラッグ可能にする方法を可能にする typescript での react-dnd の使用法を示す例が欲しいです (それがドラッグ可能であることを認識すべきではありません)。

助けてくれてありがとう！

現在取り組んでいるSPAでReact DnDを使用していますが、これはwordpressのプラグインとして構築されています! Wordpress ネイティブ メディア アップローダーは、HTML5 onDrop イベントを使用してファイルをメディア ライブラリに追加します。React DnD を使用しているため、wordpress メディア アップローダーにファイルをドロップできなくなりました。このバグは git の問題で既に報告されており、stackoverflow で質問されていることを認識しています - How to avoid native onDrop event from being overwritten for react-dnd? 、しかし悲しいことに、gitの問題とスタックオーバーフローの両方で、まだ応答がありません!

私は数か月間、react dnd を使用してきました。react に最適なドラッグ アンド ドロップ ライブラリであることは否定できませんが、このような問題により、大規模で多様なプロジェクトで使用することが難しくなっています。反応DnDを学ぶのに多くの時間を静かに費やした後、私はそのような小さな問題のためにそれから離れたくありません! 皆さんが私を助けてくれることを願っています!

TypeScript + React プロジェクトでは、私はreact-dndをそのFixedTyped 型指定で使用しています:

これは別のコンポーネントでレンダリングされます。

これは TS 1.8 でエラーなく動作します。TS 2.0 にアップグレードすると、次のコンパイル エラーが発生しました。

エラー:(90, 10) TS2600: JSX 要素属性の型 '(ExampleScreenProps & { children?: ReactNode; }) | (ExampleScreenProps & { children...' は共用体型ではない場合があります。

の型定義はDragDropContext次のとおりです。

私はこれをまとめることができません。エラーは何について不平を言っていますか？の結合が気に入らないようですがComponentClass<P> | StatelessComponent<P>、それらは要素の属性ではなく、要素の属性は単に<P>です。私は明示的に渡してみました<P>：

しかし、同じエラーが残ります。出力をアサートすることで回避できます。

しかし、私はアサーションを使わなければならないのが好きではなく、実際の問題を理解していないか、何か間違っているかどうかを理解していません。これは、修正可能なタイピングの問題ですか?