すばらしい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が、これは明らかにそのプロジェクトのバグではないため、ここに投稿することにしました。