【React】要素をドラッグ＆ドロップで移動できるライブラリ「react-draggable」

今回は、要素をドラッグ＆ドロップで移動させる方法についてです。

GitHub のページはこちらから。

GitHub – react-grid-layout/react-draggable: React draggable component
https://github.com/react-grid-layout/react-draggable

ライブラリのインストールは下記のコマンドで行います。

npm install react-draggable --save

サンプルコードは下記のとおりです。

import Draggable from 'react-draggable';

<Draggable
  defaultPosition={{x: 0, y: 0}}>
  <div style={{ position: 'absolute' }}>
    <p>ドラッグで移動したい要素</p>
  </div>
</Draggable>

上記のように実装すると、<Draggable> タグで囲った要素をドラッグで移動することができるようになります。
ただ私の環境だけでなのか、5行目で書いたように移動したい要素の一番外側の要素に position: 'absolute' を追加しないと正しく動作しませんでした。
GitHub に特にそのような記述はないのですが…まあ、正常に動作したので良しとします！

で、個人的にすごく良かった点なのですが、<Draggable> タグに handle もしくは cancel を指定すると、その要素の上にポインターがある時にドラッグを開始したときのみ要素を移動できたり、逆にその要素の上でドラッグしても要素を移動しないようにできたりします。

<Draggable
  defaultPosition={{x: 0, y: 0}}
  handle='b'>
  <div style={{ position: 'absolute' }}>
    <b>ここをつかんで移動</b>
    <p>ドラッグで移動したい要素</p>
  </div>
</Draggable>

<Draggable
  defaultPosition={{x: 0, y: 0}}
  cancel='p'>
  <div style={{ position: 'absolute' }}>
    <b>移動が可能な要素です</b>
    <p>ドラッグで移動したい要素</p>
  </div>
</Draggable>

上の要素は、<b> タグ上にポインターがある時にドラッグを開始した時のみ要素を移動できます。
<p> タグ、もしくは <div> タグ上でドラッグしても要素は移動しません。

それとは逆に、下の要素では <p> タグ上にポインターがある時にドラッグを開始しても要素は移動できません。
<b> タグ、もしくは <div> タグ上でドラッグすれば、要素は移動します。

私の場合は、<Draggable> タグ内に <textarea> を使って改行可能なテキスト入力欄を配置したかったので、cancel='textarea' を追加して、<textarea> 上ではドラッグして移動ができないようにしました。
こうすることで、ドラッグで移動できる要素内で、<textarea> に入力したテキストをドラッグで選択できるようになりました。
Windows のペイントアプリに似た操作で動作させたかったので、実現できてとても嬉しいです！

以上、React で要素をドラッグ＆ドロップで移動できるライブラリ「react-draggable」のご紹介でした。
ご参考になれば幸いです。