Javascriptでドラッグ＆ドロップの機能を実装したい（ React）

Question

現在、新しいタブ(newtab)を拡張するChrome拡張機能を作成しています。

ドラッグ＆ドロップでdiv要素を移動し、ドロップ先（移動先）でdiv要素に指定された動作を実行するような処理を考えています。

例としては以下のような動作になります。
1. 「タグ」をドラッグする
2. 「タグ」を「ノート」（移動先）にドロップする
3. 「ノート」に「タグ」を付与する

web上でいろいろ検索して入るのですが、実装するにあたってどのような知識が必要になるかわかりません。ですので、実装するにあたってのヒントになるようなものを教えていただけたらと思い質問させていただきました。javascript、モジュール、用語など、さまざまな回答をお待ちしております。

なお、Reactを使用して実装しております。
その他、質問で不明瞭な点がありましたら、ご連絡いただければと思います。適宜、質問内容を追加していきますのでよろしくお願いいたします。

Answer 1

実装するにあたってのヒントになるようなものを教えていただけたら

「タグ」はドラッグ出来るんだね。
この「ドラッグ出来るモノ」は英語で「draggable」と呼ばれているよ。

しかしReactはJSフレームワークで
テンプレートとステートを読み込ませると最新のDOMが自動的に吐き出される思想で作られている。
React流儀に従ってステートを更新すればテンプレートに働きかけて瞬時に最新のDOMに差し替わる。

ネイティブJSやjQueryのような作りと違って
draggableの仕組みをポンと差し込むのは難しいんだ。

---

でもReactでアニメーションやりたい人とかがライブラリ作ってたよなーと思ってぐぐってみるとヒットしたよ。

react draggable - Google 検索

検索結果の一覧眺めているとなんだか大変そうだけど実装できそう。
この辺を起点に調査してみてね。

Comments

[TosuTosu]

回答ありがとうございます！　どこから調べれば良いのかわからない状態でした。感謝です！！