Reactでドラッグ&ドロップを簡単に実装できるReact DnDを使ってみました。

前回同様、公式のチュートリアルに従ってます。

一応、成果物はこちら↓

react-dnd-sample

環境

  • MacOS Sierra 10.12.3
  • Node.js v6.10.0
  • React 15.4.2
  • React DnD 2.2.4

1. プロジェクト作成とReact DnDインストール

create-react-appを使ってReactのプロジェクトを作り、yarnでReact DnDを入れます。

$ create-react-app react-dnd-sample
$ cd react-dnd-sample
$ yarn add react-dnd react-dnd-html5-backend
$ yarn start

2. 実装

今回は次のコンポーネントを作ります。

  • Knight : ナイトのコマ
  • Square : チェス盤のマス
  • Board : チェス盤
  • BoardSquare : チェス盤と各マスのつなぎ。Squareは表示だけ担当

コンポーネント以外には以下を用意します。

  • Game : ドラッグ&ドロップを監視してレンダリングの指示を出すObserver
  • Constants : 定数

まあまあ長くなってしまったので、コードはGistを確認してみてください。

3. 所感

既存のコンポーネントに対し、 ドラッグ対象ならDragSource、ドロップ対象ならDropTargetでラップして、 後は少しメソッドを足してあげるだけで使えるので、けっこう使いやすいなと思いました。

例えばKnightクラスはドラッグされる対象なので、DragSourceでラップしています。

今回使っているreact-dnd-html5-backendだとタッチデバイスのときに動作しないのですが、 react-dnd-touch-backendというのもあるみたいなので次使ってみたいです。