react-コンポーネント > drag-and-drop



#### 2018.8.3 現在情報

# コンポーネント

以下のまとめページに書いてあるドラッグ＆ドロップ コンポーネントを調べました。
https://github.com/brillout/awesome-react-components#drag-and-drop

大きく分けて、要素の移動、ファイルドロップ、ソートの３種類のようです。
[ソート](https://github.com/brillout/awesome-react-components#sortable-list)と合わせてやりたい調べたほうがよさそうです。

https://github.com/brillout/awesome-react-components#sortable-list


## 項目

 - [react-draggable](https://github.com/mzabriskie/react-draggable) - [React draggable component.](#React draggable component)
 - [react-dnd-touch-backend](https://github.com/yahoo/react-dnd-touch-backend) - [Touch Backend for react-dnd.](#Touch Backend for react-dnd)
 - [react-dropzone](https://github.com/okonet/react-dropzone) - Simple HTML5 drag-drop zone with React.js.
 - [react-dnd](https://github.com/gaearon/react-dnd) - Drag and Drop for React.
 - [react-sortable-pane](https://github.com/bokuweb/react-sortable-pane) - Sortable and resizable pane component for React.
 - [mzabriskie/react-draggable: React draggable component](https://github.com/mzabriskie/react-draggable)
 - [react-dragula](https://github.com/bevacqua/react-dragula) - 2015年8月で更新止まっています。
 - [react-droparea](https://github.com/avocode/react-droparea) - 2015年9月で更新止まっています。


## React draggable component

[mzabriskie/react-draggable: React draggable component](https://github.com/mzabriskie/react-draggable)

要素のドラッグ＆ドロップが可能になります。
ドラッグの細かい制御もできるようです。
これはモバイルでも動作する模様です。

demo - [React Draggable](http://mzabriskie.github.io/react-draggable/example/)

<img src="https://qiita-image-store.s3.amazonaws.com/0/49910/08690e3f-794a-75ff-52c9-d459d1c70213.png" width="400px" />



## Touch Backend for react-dnd

[react-dnd-touch-backend](https://github.com/yahoo/react-dnd-touch-backend) 

Yahoo製
[react-dnd](https://github.com/react-dnd/react-dnd) の拡張
[react-dnd](https://github.com/react-dnd/react-dnd) はモバイルで動作しないので、そのための拡張の模様

モバイルでも要素のドラッグ＆ドロップやソートができます。


demo - [React DnD](https://react-dnd.github.io/react-dnd/examples-dustbin-single-target.html)

<img src="https://qiita-image-store.s3.amazonaws.com/0/49910/21429fb2-d793-4a51-674c-4730f1816f76.png" width="200px" />　<img src="https://qiita-image-store.s3.amazonaws.com/0/49910/a2fe5632-2a43-f058-d9c0-942b8c1cffc2.png" height="200px" />
<img src="https://qiita-image-store.s3.amazonaws.com/0/49910/55d39b3b-0304-be33-8cf0-c146ee379baf.png" height="200px" />

参考：[react-dnd…Reactjsのドラッグ並び替え処理 - Qiita](https://qiita.com/59naga/items/39e6aaa816f7abacc6a9)


## react-dropzone
[react-dropzone](https://github.com/okonet/react-dropzone)

ファイルのドロップをサポートするライブラリ

demo - [react-dropzone](https://react-dropzone.js.org/#examples)

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/5f1f3fe3-a230-b30b-5312-8d6a3ec6b441.png)



## react-dnd
[react-dnd](https://github.com/gaearon/react-dnd) - Drag and Drop for React.

上記Touch Backend for react-dndで紹介したもの

## react-sortable-pane
[react-sortable-pane](https://github.com/bokuweb/react-sortable-pane) - Sortable and resizable pane component for React.

いろんなソートができます。
モバイルでは動作しないような

demo - [Storybook](http://bokuweb.github.io/react-sortable-pane/?selectedKind=Basic%20%28uncontrolled%29&selectedStory=vertical&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/9b054340-d094-61bc-e7f9-20cf359e3138.png)

<img src="https://qiita-image-store.s3.amazonaws.com/0/49910/e0db726f-41ae-358b-14f1-6776cd411325.png" height="200px" />



## react-draggable
[mzabriskie/react-draggable: React draggable component](https://github.com/mzabriskie/react-draggable)


![image](https://qiita-image-store.s3.amazonaws.com/0/49910/10089923-faf0-58fd-df1c-9eb3b3400ddd.png)



## react-dragula
[react-dragula](https://github.com/bevacqua/react-dragula)
2015年8月で更新止まっています。

ソートができる[dragula](https://github.com/bevacqua/dragula)のReactラッパー
モバイルでも動くようなので、モバイル対応。
[Sortable](https://github.com/RubaXa/Sortable)と比較した方がいいような気もします。


demo - [react-dragula](http://bevacqua.github.io/react-dragula/)

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/d25637dc-57c5-19a4-2cab-129eabb77379.png)



## react-droparea

[react-droparea](https://github.com/avocode/react-droparea) 

[react-dropzone](https://github.com/okonet/react-dropzone)からインスパイアされたとのこと。
3年くらい更新止まってます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/49910/164f8e28-0ab2-b7ef-fc9d-42c6dd0965a0.gif" width="300px" />