Reactのライブラリ「React DnD」の基本的使い方

Rで作っていた心理尺度開発ツールをReactベースで再構築するなかでドラッグ＆ドロップが必要になったので調査。

React界隈では、「React DnD」と「React Beautiful DnD」のどちらかが主流のようだ。

React DnD

Drag and Drop for React

react-dnd.github.io

GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React

Beautiful and accessible drag and drop for lists with React - atlassian/react-beautiful-dnd

github.com

今回はこのうち、設定の自由度が比較的高そうな「React DnD」を使うこととした。

ただし、React DnDは使い方がBeautifulのそれと比べて難しいと言われている。実際チュートリアルからいきなりチェスボード（駒はひとつだが）の作り方の説明であるが、結構なハードルが高そう。そこでなにかよい解説サイトがないか探していたところ以下に到達。

React DnD in Examples

We will take a look on React DnD basic capabilities in examples with implementing our own kanban board.

medium.com

これでなんとか動作する様に使うことができるようになった。感謝。

ところで、ひととう重要な点でVersion14から変更があったので留意。

Ver14以前：　useDrag({ item: { type: BOX }}) 
Ver14以降： useDrag({ type: 'BOX' })

古い書き方にすると以下のようなエラー出て怒られますので注意。

 Invariant Violation
 spec.type must be defined