TODO アプリのTODOをドラッグ&ドロップで移動させたいなぁ。という欲求が高まってきたので、そういうライブラリがないか探してみたら、Atlassianが提供してる react-beautiful-dnd というライブラリがあるようだったので使ってみた。
GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React
使い方は動画になっていて、ステップバイステップで教えてくれるので良い。
Beautiful and Accessible Drag and Drop with react-beautiful-dnd from @alexandereardon on @eggheadio
今のところ、第5回まで見て、それの通りに作ってみてドラッグアンドドロップでリストが変えられるようになったので
最小構成のコード片が作れたかなと思って記事にしてみた。
動画の途中で コンポーネントの innerRef 属性に対して設定している箇所があったんだけど、うまく動かなくて色々調べてたら、styled-components v4 から innerRef が削除されて、React の ref 属性をそのまま使うようになったとかで、最新のコードでは innerRef 属性の代わりに ref 属性を使って設定する必要があるみたいだった。
詳しくは、ここらへん に書いてあるので読んでみるといいかも。
使い勝手としては、まぁ今のところは最小構成なのでもうちょっとインタラクティブに動いてほしいなぁと思うところはあれど、期待していたような動作をしてくれるので満足している。スマホからでも動かせるみたいだし、調整次第では使えるものになるかなぁと思っている。
あとは、Material-UI と併用できるのか？というところが気になるので、そのあたりを今後調べていきたい。
成果物はここ に上げた。
(2019/02/21 追記)
material-ui と styled-component を共存させることでドラッグアンドドロップが可能なリストを作成することができた。material-ui のみだと ref が参照できなくて react-beautiful-dnd がエラーを出してしまうようだった。
成果物はここ に上げた。
