Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

2018.8.3 現在情報

コンポーネント

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

大きく分けて、要素の移動、ファイルドロップ、ソートの3種類のようです。
ソートと合わせてやりたい調べたほうがよさそうです。

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

項目

React draggable component

mzabriskie/react-draggable: React draggable component

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

demo - React Draggable

Touch Backend for react-dnd

react-dnd-touch-backend

Yahoo製
react-dnd の拡張
react-dnd はモバイルで動作しないので、そのための拡張の模様

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

demo - React DnD

 

参考:react-dnd…Reactjsのドラッグ並び替え処理 - Qiita

react-dropzone

react-dropzone

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

demo - react-dropzone

image

react-dnd

react-dnd - Drag and Drop for React.

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

react-sortable-pane

react-sortable-pane - Sortable and resizable pane component for React.

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

demo - Storybook

image

react-draggable

mzabriskie/react-draggable: React draggable component

image

react-dragula

react-dragula
2015年8月で更新止まっています。

ソートができるdragulaのReactラッパー
モバイルでも動くようなので、モバイル対応。
Sortableと比較した方がいいような気もします。

demo - react-dragula

image

react-droparea

react-droparea

react-dropzoneからインスパイアされたとのこと。
3年くらい更新止まってます。

sugasaki
個人的なメモが多いです。 書いてる事は個人の見解であり所属する組織の公式見解ではありません
https://sugasaki.com/
runners
スポーツで世界を良くしたいエンジニアチーム。応援navi、.finisher、run&といった製品開発をしています!
https://www.wantedly.com/projects/167082
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away