Open hiz8 opened 5 years ago
React を使用しているアプリケーションでドラッグ＆ドロップによるソートを実装している。 そこでまず色々とライブラリを調べた結果、React DnD を採用する事とした。
react-sortable-hoc も用途はバッチりマッチしており、実装方法も容易でいいように感じたが、 いかんせんHOC 前提である事が今回はネックとなった。 これを導入するアプリのコードは全面的にHOOKSを前提としたFCで構成されており、Hooks APIを提供している React DnD の方が要件とマッチした。
また、ドキュメントを確認すると一見難解そうなRAだが、低レベルなAPIが提供されているのでそう見えるがソート自体の実装は比較的容易に行う事ができた。
この Hooks API を用いた日本語の技術記事はほとんどないようだが、サンプルが割と豊富にあるのでこれらを確認すれば大体の実装方法は理解できると思う。 JS と TS、Hooks と Ovsarve 版を切り替えられるのも大変ありがたい。
後はタッチデバイスに対応される為に、react-dnd-touch-backend を試したい。
これは React DnD はHTML5 drag and drop API を用いているという事情でタッチデバイスみは対応していない。 もしそれを行いたい場合はこのサードパーティ製のライブラリを用いることを公式でも推奨されている。
サードパーティとはいっても開発しているのはYahooのフロントエンドエンジニアである redonkulus であるため、コードの品質は間違いないであろう。
hiz8
commented
5 years ago hiz8
commented
5 years ago
React を使用しているアプリケーションでドラッグ＆ドロップによるソートを実装している。 そこでまず色々とライブラリを調べた結果、React DnD を採用する事とした。
react-sortable-hoc も用途はバッチりマッチしており、実装方法も容易でいいように感じたが、 いかんせんHOC 前提である事が今回はネックとなった。 これを導入するアプリのコードは全面的にHOOKSを前提としたFCで構成されており、Hooks APIを提供している React DnD の方が要件とマッチした。
また、ドキュメントを確認すると一見難解そうなRAだが、低レベルなAPIが提供されているのでそう見えるがソート自体の実装は比較的容易に行う事ができた。
この Hooks API を用いた日本語の技術記事はほとんどないようだが、サンプルが割と豊富にあるのでこれらを確認すれば大体の実装方法は理解できると思う。 JS と TS、Hooks と Ovsarve 版を切り替えられるのも大変ありがたい。
後はタッチデバイスに対応される為に、react-dnd-touch-backend を試したい。
これは React DnD はHTML5 drag and drop API を用いているという事情でタッチデバイスみは対応していない。 もしそれを行いたい場合はこのサードパーティ製のライブラリを用いることを公式でも推奨されている。
サードパーティとはいっても開発しているのはYahooのフロントエンドエンジニアである redonkulus であるため、コードの品質は間違いないであろう。