2018.8.3 現在情報
コンポーネント
以下のまとめページに書いてあるドラッグ＆ドロップ コンポーネントを調べました。
https://github.com/brillout/awesome-react-components#drag-and-drop
大きく分けて、要素の移動、ファイルドロップ、ソートの３種類のようです。
ソートと合わせてやりたい調べたほうがよさそうです。
項目
- react-draggable - [React draggable component.](#React draggable component)
- react-dnd-touch-backend - [Touch Backend for react-dnd.](#Touch Backend for react-dnd)
- react-dropzone - Simple HTML5 drag-drop zone with React.js.
- react-dnd - Drag and Drop for React.
- react-sortable-pane - Sortable and resizable pane component for React.
- mzabriskie/react-draggable: React draggable component
- react-dragula - 2015年8月で更新止まっています。
- react-droparea - 2015年9月で更新止まっています。
React draggable component
mzabriskie/react-draggable: React draggable component
要素のドラッグ＆ドロップが可能になります。
ドラッグの細かい制御もできるようです。
これはモバイルでも動作する模様です。
demo - React Draggable
Touch Backend for react-dnd
Yahoo製
react-dnd の拡張
react-dnd はモバイルで動作しないので、そのための拡張の模様
モバイルでも要素のドラッグ＆ドロップやソートができます。
demo - React DnD
参考：react-dnd…Reactjsのドラッグ並び替え処理 - Qiita
react-dropzone
ファイルのドロップをサポートするライブラリ
demo - react-dropzone
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
react-draggable
mzabriskie/react-draggable: React draggable component
react-dragula
react-dragula
2015年8月で更新止まっています。
ソートができるdragulaのReactラッパー
モバイルでも動くようなので、モバイル対応。
Sortableと比較した方がいいような気もします。
demo - react-dragula
react-droparea
react-dropzoneからインスパイアされたとのこと。
3年くらい更新止まってます。
