楽な UI インタラクションのための 10 のベストなドラッグ アンド ドロップ React ライブラリ

React は有名なユーザー インターフェイス (UI) JavaScript ライブラリです。 React ライブラリを使用すると、ソーシャル メディア アプリ、e コマース プラットフォーム、ブログ、シングルページ アプリケーション、コンテンツ管理システム (CMS)、ダッシュボード、データ視覚化など、さまざまな種類の Web アプリを作成できます。

開発者は、さまざまなライブラリやフレームワークを使用して React アプリの機能を拡張できます。このようなライブラリは、さまざまなクラスにグループ化できます。ドラッグ アンド ドロップは、非常に人気のあるライブラリ カテゴリです。

ドラッグ アンド ドロップ機能は、ユーザーが画面上の要素をクリックまたは選択し、ドラッグして別のコンポーネントにドロップできるようにする UI インタラクションです。この機能の好例は、項目を目的の場所にドラッグ アンド ドロップしてリスト内の項目を再配置することです。

次の場合にもドラッグ アンド ドロップ機能を使用できます。

• ファイルのアップロード: ユーザーは、マシン内をスクロールしてファイルを選択してアップロードする代わりに、ファイルをドラッグ アンド ドロップできます。
• カンバン ボード: ユーザーがアクティビティ レベルまたは段階に応じて項目をドラッグ アンド ドロップできるダッシュボードを作成できます。
• 画像ギャラリー: ユーザーが画像をアップロードしたり並べ替えたりできる画像ギャラリーを作成できます。
• ウィジェット: ユーザーはウィジェットをドラッグ アンド ドロップすることでアプリの外観をカスタマイズできます。
• ショッピング カート: ユーザーはアイテムをクリックし、ドラッグしてカートにドロップできます。

React ドラッグ アンド ドロップ ライブラリは、開発者が React アプリケーションにドラッグ アンド ドロップ機能を実装できるようにする、事前に構築されたコンポーネントのセットです。

これらのライブラリには再利用可能なコンポーネントが付属しており、開発者はドラッグ アンド ドロップできる要素を作成できます。ライブラリは、ドラッグ開始、ドラッグ入力、ドラッグ終了、ドロップなどのさまざまなイベントを処理します。

ドラッグ アンド ドロップ ライブラリが UI インタラクションの向上にどのように役立つか

• ユーザー エクスペリエンスの強化: ドラッグ アンド ドロップ機能は、ユーザーがアプリケーションを操作するための直感的なアプローチです。アイテムを手動で入力する代わりにドラッグ アンド ドロップするオプションにより、インタラクティブでシームレスな対話が可能になります。
• ワークフローの簡素化: ファイルをコンピュータの別の場所からアプリケーションにアップロードする代わりに、ファイルをドラッグ アンド ドロップするだけで済みます。
• 生産性の向上: ドラッグ アンド ドロップ機能により時間が節約され、ユーザーの生産性が向上します。
• モバイルデバイスに最適: スマートフォンやタブレットなどのモバイルデバイスの画面スペースは限られています。ユーザーは主にジェスチャに依存してナビゲーションを行っているため、ドラッグ アンド ドロップは素晴らしい追加機能となります。
• 魅力的なインターフェイスの提供: ドラッグ アンド ドロップ機能により、アプリのユーザー インターフェイスに視覚的な魅力を追加できます。ユーザーがアプリ上で項目をドラッグ アンド ドロップするときに、フィードバックを提供したり、アクションを説明したりするアニメーションを追加できます。

これらは、最高のドラッグ アンド ドロップ React ライブラリです。

反応する

React DnD は 、複雑なドラッグ アンド ドロップ インターフェイスを構築するための React ユーティリティのセットです。このライブラリは、ドラッグ アンド ドロップ機能にデータ転送も含まれる、Trello や Storify に似たアプリの作成に最適です。

インストール;

npm install react-dnd react-dnd-html5-backend

React DnD を React コンポーネントに次のようにインポートできます。

 import { useDrag } from 'react-dnd'

主な特徴

• コンポーネントと連携: このライブラリは既製のウィジェットを提供しません。ただし、コンポーネントをラップし、それらに props を注入します。
• 拡張可能: React DnD ライブラリを使用する場合、マウス イベントまたはタッチ イベントに基づいてカスタム バックエンドを追加できます。
• テスト可能: Jest または Enzyme を使用して React DnD コードをテストできます。
• タッチのサポート: React DnD タッチ バックエンドは、 このライブラリにタッチ機能を追加します。

React DnD は、無料のオープンソース ライブラリです。

反応ドラッグ可能

React Draggable は、 ドラッグ可能な要素を簡単に作成できる、シンプルかつ強力な React ライブラリです。

インストール;

npm install react-draggable

React Draggable を使用するには、React コンポーネントに次のようにインポートします。

 import Draggable from 'react-draggable';

特徴

• インストールと設定が簡単: ライブラリをインストールしてインポートするだけで開始できます。ライブラリから個々のコンポーネントをインポートすることもできます。
• バニラ JavaScript および React との互換性: 次のように、プレーン JavaScript で React Draggable を使用できます。

 let Draggable = require('react-draggable');

let DraggableCore = Draggable.DraggableCore;

• 他の React ライブラリとの互換性: React Grid Layout などの他のライブラリと React Draggable を使用できます。

React Draggable は、無料のオープンソースの Drap and Drop React ライブラリです。

リアクトドロップゾーン

React Dropzone は、 ファイル用の HTML-5 準拠のドラッグ アンド ドロップ ゾーンを作成するためのシンプルな React フックです。

インストール;

npm install --save react-dropzone

または：

yarn add react-dropzone

次に、次のようにこのライブラリをインポートできます。

 import {useDropzone} from 'react-dropzone';

特徴

• スタイリング ドロップゾーン: このライブラリはスタイル ルールを設定しないため、必要に応じてコンポーネントをスタイル設定できます。
• ユーザーが受け入れ可能なファイル タイプを定義できるようにする: accept prop を指定することで、Dropzone に特定のファイル タイプを受け入れるか拒否するかを指示できます。
• カスタム検証を受け入れる: validator プロパティを使用すると、さまざまなファイルのカスタム検証を指定できます。

React Dropzone は、無料のオープンソースのドラッグ アンド ドロップ React ライブラリです。

React グリッド レイアウト

React Grid Layout は、 サイズ変更可能でドラッグ可能な React 用のグリッド レイアウトです。

インストール;

npm install react-grid-layout

このライブラリは次のようにインポートできます。

 import GridLayout from "react-grid-layout";

特徴

• 依存関係なし : React Grid Layout は純粋に React 上に構築されており、JQuery はありません。
• サイズ変更可能なウィジェット : ドラッグ アンド ドロップ機能に加えて、コンポーネントのサイズを変更することもできます。
• 応答性の高いブレークポイント: ライブラリは、ブレークポイントごとに個別のレイアウトを提供します。
• カスタマイズ可能: グリッド全体を再構築せずにウィジェットを追加または削除できます。

React Grid Layout は、無料のオープンソース React ライブラリです。

反応する

React rnd は 、React のドラッグ可能でサイズ変更可能なコンポーネントです。

インストール;

npm i -S react-rnd

または

yarn add react-rnd

特徴

• シンプル: React rnd はシンプルですが非常に強力になるように設計されています。
• TypeScript と JavaScript の両方との互換性: JavaScript と TypeScript のどちらで構成したかに関係なく、アプリで React rnd を使用できます。
• サイズ変更のサポート : React rnd を使用して作成されたコンポーネントをニーズに合わせて簡単にサイズ変更できます。

React rnd は、無料のオープンソース React ライブラリです。

React 仮想化 DND

React Virtualized dnd は、 仮想化スクロールバーを内蔵したドラッグ アンド ドロップの React フレームワークです。

インストール;

npm install --save react-virtualized-dnd

React Virtualized dnd を次のようにインポートできます。

 import ExampleBoard from 'react-virtualized-dnd';

特徴

• さまざまなコンポーネントから選択可能: コンポーネントは、「固定高さ」、「可変高さ」、および「グループ化可能なドロップ可能」にグループ化されています。
• カスタマイズ可能: React Virtualized dnd のコンポーネントをニーズに合わせてカスタマイズできます。

React Virtualized dnd は、ソース コードが GitHub でホストされているオープンソースの React フレームワークです。

リアクトムーバブル

React Movable は 、リストとテーブル用のドラッグ アンド ドロップ操作の React ライブラリです。

インストール;

yarn add react-movable

このライブラリは次のようにインポートできます。

 import { List, arrayMove } from 'react-movable';

特徴

• 選択できるさまざまなドラッグ アンド ドロップ オプション: ライブラリには、選択できるさまざまなタイプのドラッグ アンド ドロップ コンポーネント用の定型コードが含まれています。
• 軽量ライブラリ: React Movable には JQuery などの依存関係がありません。 4kB未満（gzip圧縮）です。
• 自由なスタイル設定: React Movable は、アプリのスタイルをどのように設定するかを制御しません。
• タッチ サポート: このライブラリは、スマートフォン、タブレット、およびタッチ機能を備えたあらゆるデバイスで使用できるアプリの作成に役立ちます。
• TypeScript で記述: コードに Type を導入できます。これは JavaScript では利用できない機能です。

React Movable は、無料のオープンソース React ライブラリです。

ドラッグ可能

Draggable は、開発者がネイティブ ブラウザ イベントを包括的な API に抽象化することでドラッグ アンド ドロップ イベントを作成できるようにするドラッグ アンド ドロップ React ライブラリです。

インストール;

npm install @shopify/draggable --save

または糸経由:

yarn add @shopify/draggable

Draggable を次のように React アプリにインポートできます。

 import { Draggable } from '@shopify/draggable';

特徴

• 分類されたコンポーネント: コンポーネントは分類されているため、使用する正確なコンポーネントを簡単に見つけることができます。これらのコンポーネントはカスタマイズ可能です。
• 主要なブラウザとの互換性: Google Chrome、Mozilla Firefox、Apple Safari などのブラウザで Draggable を使用できます。
• TypeScript のサポート: このライブラリを使用する場合、コードに TypeScript 定義を追加できます。
• プラグインのサポート: Collidable や SwapAnimation などのプラグインを使用して Draggable の機能を追加できます。

Draggable は、寄稿者によって保守されている無料のオープンソース React ライブラリです。

リアクション ドラッグして選択します

React ドラッグして選択は、 アプリケーションにドラッグして選択機能を追加するために使用できる React ライブラリです。

インストール;

npm install --save @air/react-drag-to-select

または

yarn add @air/react-drag-to-select

次のようにして、このライブラリをアプリにインポートできます。

 import { useSelectionContainer } from '@air/react-drag-to-select'

特徴

• シンプル: このライブラリは項目を選択しません。ただし、ライブラリは選択ボックスを描画し、座標を提供します。
• TypeScript のサポート: React ドラッグして選択するライブラリは TypeScript で書かれているため、TypeScript と JavaScript で書かれた React アプリで使用できます。
• テストのサポート: このライブラリは、ほとんどの React テスト フレームワークで使用できます。

React Drag-to-select は、無料のオープンソース ライブラリです。

リアクトドラグラ

React Dragula は 、単純なドラッグ アンド ドロップ操作の React ライブラリです。

インストール;

npm install react-dragula --save

または、

bower install react-dragula --save

特徴

• カスタマイズ可能: ニーズに合わせて React Dragula のコンポーネントをカスタマイズできます。
• タッチのサポート: このライブラリを使用して、スマートフォン、タブレット、その他のタッチ デバイスで使用できるアプリを作成できます。
• 軽量: React Dragula のバンドル サイズは小さいため、React アプリを小さくしたい場合に最適です。

React Dragula は、無料のオープンソース ライブラリです。

結論

これで、次の React アプリケーションで使用できるさまざまなドラッグ アンド ドロップ ライブラリが完成しました。ライブラリの選択は、次のアプリに搭載する予定の機能、好み、好みによって異なります。

アプリが大きい場合は、さまざまなニーズに応えるために複数のドラッグ アンド ドロップ ライブラリを使用することがあります。これらのライブラリのほとんどは、さまざまな React テスト ライブラリと互換性があるため、エラーのないアプリケーションを簡単に出荷できます。