問題タブ [react-dnd]

アプリケーション内で使用するために、react-dnd ソート可能な例を採用しました。

ドラッグに追従する「不透明度」を作成できません。

最初に要素を選択すると、不透明度が適用されます。

しかし、位置を変更するために上に移動すると、元のDOM要素(?)に不透明度が適用されたままになります。

それに応じて状態が変更され、この状態に関連付けられたテーブル内の列が並べ替えられます。したがって、不透明度を除けば、他のすべては正常に機能しています。

要素を移動すると、li の値のみが変更されますが、data-reactid位置は変更されません。

私のアプリの唯一の違いは、状態を管理する方法です。私のアプリケーションでは、状態は redux で管理されています。

hoverDropTarget に渡される関数は、基本的に例からのコピー アンド ペーストです。

SortableColumnEntry コンポーネント:

私が取り組んでいるアプリケーションの要件のために、react コンポーネントで react-dnd を正常に使用しています。

このコンポーネントには、単純なモーダル ウィンドウを表示するボタンもあります。

ご覧のとおり、このモーダルには、ネイティブの HTML ドラッグ アンド ドロップ イベントをリッスンする div 要素が含まれています。私の問題は、どうやらこれらのネイティブ イベントが何らかの形で react-dnd に上書きされ、役に立たなくなっていることです。

コンポーネントからすべての react-dnd ドロップ ターゲットを削除してテストしたところ、予想どおり、ネイティブ イベントが機能するようになりました。どうすれば期待どおりの動作を実現できますか?

React-dnd プロジェクトの例を読んでいます:

この $splice は、このページで説明されているものと同じですか?

このコードの塊が何をするのか説明できる人はいますか? この$splice機能は私にとって非常に混乱しています。

at arrayOf( < その括弧で構文エラーが発生しますが、ドキュメントを見ると、PropTypes.array だけを実行するのが正しいように思われます。または number

私の含まれるものはこれです：

これは実際にはreactdndデモからのものです

ドラッグ可能な複数のページを表示するアプリを入手しました。それらのコンテンツは非常に長くなる可能性があるため、ページ名のみを表示し、ページの高さを約50pxon に制限し、高beginDrag()さを auto on にリセットしendDrag()ます。残念ながら、これは機能しません。スタイルは無視されます。これは、react-dnd が要素の比率を維持してドロップ ターゲットを処理し、どのコンポーネントがどの位置にあるかを把握できるようにする必要があるためだと思います。これを達成する他の方法はありますか？

いくつかの異なるコンポーネントで構成される最上位コンポーネントがあります。

• InventoryBox - インベントリに含まれるスペースを指定します
• InventoryList - インベントリ内のアイテムのリストを指定します
• アイテム - インベントリ リスト内の単一のアイテム

InventoryBox は最上位のコンポーネントなので、DragDropContext でラップしました。私が直面している問題は、collect 関数で指定した connectDragSource 関数がアイテム コンポーネントにメソッドを注入していないことです。

マイコレクト機能

マイ アイテム コンポーネント

私の最終的な目標は、アイテム コンポーネントをリストから別のインベントリ ボックスにドラッグすることです。

すばらしいReactDnDライブラリを使用して React.js に実装された trello のようなインターフェイスが配置されており、デフォルトのhtml5 バックエンドでうまく機能します。タッチ デバイスをサポートするために、タッチ バックエンドに切り替えることにしました。

とにかく、切り替えると「機能」しますが、リストの列とその中のカードの両方がドロップ ターゲットであるため、このタッチ バックエンドで問題が発生するようです。私が気付いている動作は、カードをドロップ ターゲットとして完全に無視し、ドロップ ターゲットがカードを含むリストであると常に考慮していることと一致しています。

これが起こっていると思う理由は、あるリストから別のリストにカードをドラッグするときに、ターゲットリストの真ん中にカードを置いていても関係ないためです。これは、リスト要素の空の領域にカーソルを合わせたときに予想される動作です。真ん中のカードにカーソルを合わせると、期待される動作は、その場所でドロップをマークし、1 つ下のカードを下に移動することです。

私が提起した github の問題に関するこのコメントmonitor.isOver({shallow: true})で述べたように、これは から返される誤った結果と関係があるのではないかと疑うようになりましたが、そこで正しく述べられているように、そのメソッドはバックエンドごとに実装されていません。しかし、実装でバックエンドの何かを使用している可能性があります。

スタンドアロン アプリに抽出された例を次に示します: https://github.com/gnapse/react-dnd-trello

上記のように動作します。そのリポジトリには 2 つのコミットがあります。最初のコミットで、アプリは Html5 バックエンドを使用し、期待どおりに動作します。そのコミットをチェックアウトして、それがどのように機能するかを確認できます。その後、master をもう一度チェックアウトすると、touch バックエンドで動作していることがわかります。カードをリストからドラッグし、ドロップせずにそのリストにドラッグして戻すと、カードのリストのどこに配置しても、ドロップは常に中央ではなく最後にマークされます。

また、これはタッチ イベントとマウス イベントの両方で発生します。ただし、本物ではなく、iPad シミュレーターでテストしました。

問題レポートをに提出しましたreact-dnd-touch-backendが、そこではうまくいきませんでした。リポジトリに問題を提出することも検討しましたreact-dndが、これは明らかにそのプロジェクトのバグではないため、ここに投稿することにしました。

私はReactを初めて使用し、アプリケーションにドラッグアンドドロップを追加するための このチュートリアルに従っています

チュートリアルに従って、騎士の駒をドラッグできるチェス盤を作成しましたが、機能しませんでした (まだ騎士をドラッグできません)。

});

誰かが私が間違っていることを説明できますか?