react-dndで複数オブジェクトのドラッグ選択とドラッグ＆ドロップ
Reactでオブジェクトをマウスのドラッグで複数選択し、ドラッグ＆ドロップするコードのメモ。
react-dndだけではマウスドラッグの範囲選択ができなかったので、react-selectoとreact-moveableを組み合わせて考えた。
範囲選択したオブジェクトの位置を維持したままドラッグできるサンプルが見当たらなかったのでメモとして残しておく。（ただし、コードはきれいではない）
実装の概要
react-selectoライブラリとreact-moveableライブラリの組み合わせです。
react-dndはドラッグ＆ドロップの基本的な処理とドラッグ中の表示で使用しました。
react-selectoライブラリはマウスのドラッグによる範囲選択を実装するためのライブラリです。
react-moveableライブラリはオブジェクトの移動・変形などを実装するためのライブラリです。
react-selectoライブラリのデモで、Select Moveable targets in real time. というデモがあります。
このデモではオブジェクトを範囲選択してまとめて移動するサンプルです。これをもとにドラッグ＆ドロップの操作になるそうに実装しています。
備考
今回作成したサンプル実装では、オブジェクト１つのmouseDown→そのままドラッグという操作はできません。
１個だけ選択する場合も、１度クリックして選択してからドラッグする必要があります。
１個のオブジェクトをmouseDown→そのままドラッグするには、単体のオブジェクトに対してreact-dndの処理を組み込む必要がありそうです。
