web-dev-qa-db-ja.com

react.jsのタッチサポートによるドラッグアンドドロップ

タッチイベントをサポートするFacebookのreact.jsのドラッグアンドドロップを実装する方法

React.jsのドラッグアンドドロップに関する question sと articleslibraries のカップルがありますが、タッチイベントについて言及しているようには見えません。デモの作業は私の電話ではありません。

一般的に、最も簡単な方法は何だろうと思います。すでにタッチをサポートしている既存のd&dライブラリを使用してこれを実装してみてください。または、react d&dの例のいずれかを使用して、タッチで動作するようにしてみてください( (この問題 を見て、簡単ではないかもしれません)。)

17
Flion

あなたはすでに react-dnd について言及し、私は [〜#〜] pr [〜#〜] を作成して、タッチデバイスのdndを有効にして、試してみることができるようにしました

6
anton_byrna

反応モーション(タッチイベントあり)

リストの項目をドラッグするために「 react-motion 」を試しました。 15から20を超えるアイテムを使用すると、非常に遅延します。 (しかし、小さなリストでは、このようにうまく機能します demo )。モバイルデバイスはデスクトップよりもかなり遅いことに注意してください。

react-motionに関する重要な注意:アニメーションのパフォーマンスをテストするときは、プロダクションモードを使用することを忘れないでください!

react-dnd(タッチイベントあり)

2番目のオプションは " react-dnd "でした。それは素晴らしい図書館です。それは低レベルですが、それを扱う方法を理解することはかなり簡単です。しかし、タッチイベントがサポートされていないため、最初は「react-dnd」を選択できませんでした。

その後、Yahooが react-dnd-touch-backend をリリースしたときに、アプリを「react-motion」から「react-dnd」に切り替えることにしました。これにより、すべてのパフォーマンスの問題が解決されました。私たちは50-70の項目をリストしており、期待どおりに機能します。

ヤフーは本当に良い仕事をしてくれて、ソリューションは私たちのプロダクションアプリで機能します。

8
koorchik