React 是一个著名的用户界面 (UI) JavaScript 库。 您可以使用 React 库创建不同类型的 Web 应用程序，包括社交媒体应用程序、电子商务平台、博客、单页应用程序、内容管理系统 (CMS)、仪表板和数据可视化等等。
开发人员可以使用各种库和框架扩展 React 应用程序的功能。 这些库可以分为不同的类别； 拖放是一个非常流行的库类别。
拖放功能是一种 UI 交互，允许用户单击/选择屏幕上的元素，将其拖放到另一个组件上。 此功能的一个完美示例是通过将项目拖放到所需位置来重新排列列表中的项目。
您还可以在以下情况下使用拖放功能；
- 文件上传：用户可以拖放文件而不用滚动他们的机器来选择和上传文件。
- 看板：您可以创建一个仪表板，用户可以在其中根据活动级别或阶段拖放项目。
- 图片库：您可以拥有一个图片库，用户可以在其中上传和重新排列图像。
- 小部件：用户可以通过拖放小部件来自定义应用程序的外观。
- 购物车：用户可以点击一个商品，将其拖放到购物车中。
React 拖放库是一组预构建的组件，允许开发人员在 React 应用程序中实现拖放功能。
这些库带有可重用的组件，允许开发人员创建可以拖放的元素。 这些库处理不同的事件，例如拖动开始、拖动进入、拖动离开和放下。
拖放库如何帮助实现更好的 UI 交互
- 增强的用户体验：拖放功能是用户与应用程序交互的一种直观方法。 拖放项目而不是手动输入的选项提供了交互式和无缝的交互。
- 简化的工作流程：您无需将文件从计算机的不同位置上传到应用程序，只需拖放即可。
- 提高工作效率：拖放功能可以节省时间，提高用户的工作效率。
- 适用于移动设备：智能手机和平板电脑等移动设备的屏幕空间有限。 用户主要依靠手势进行导航，这使得拖放成为一个很棒的补充。
- 提供引人入胜的界面：拖放功能可以为应用程序的用户界面增添视觉吸引力。 您可以添加动画来提供反馈或描述用户在应用程序上拖放项目时的操作。
这些是最好的拖放 React 库：
反应 DnD
React DnD 是一组用于构建复杂的拖放界面的 React 实用程序。 这个库非常适合创建类似于 Trello 和 Storify 的应用程序，其中拖放功能还涉及数据传输。
安装;
npm 安装 react-dnd react-dnd-html5-backend
您可以将 React DnD 导入到您的 React 组件中；
import { useDrag } from 'react-dnd'
主要特征
- 与您的组件一起工作：这个库不提供现成的小部件。 但是，它包装了您的组件并将道具注入其中。
- 可扩展：您可以在使用 React DnD 库时添加基于鼠标事件或触摸事件的自定义后端。
- 可测试：您可以使用 Jest 或 Enzyme 来测试 React DnD 代码。
- 触摸支持：React DnD 触摸后端向该库添加了触摸功能。
React DnD 是一个免费的开源库。
反应可拖动
React Draggable 是一个简单但功能强大的 React 库，可以轻松创建可拖动元素。
安装;
npm 安装 react-draggable
要使用 React Draggable，请在 React 组件上按如下方式导入。
import Draggable from 'react-draggable';
特征
- 易于安装和配置：您只需安装和导入库即可开始使用。 您还可以从库中导入单个组件。
- 与 vanilla JavaScript 和 React 兼容：您可以将 React Draggable 与纯 JavaScript 一起使用，如下所示；
let Draggable = require('react-draggable');
let DraggableCore = Draggable.DraggableCore;
- 与其他 React 库兼容：您可以将 React Draggable 与其他库一起使用，例如 React Grid Layout。
React Draggable 是一个免费的开源 Drap and Drop React 库。
反应下降区
React Dropzone 是一个简单的 React Hook，用于为文件创建符合 HTML-5 的拖放区域。
安装;
npm install –save react-dropzone
或者：
纱线添加反应下降区
然后您可以按如下方式导入该库；
import {useDropzone} from 'react-dropzone';
特征
- Styling Dropzone：这个库没有设置任何样式规则，因此您可以根据自己的喜好设置组件的样式。
- 允许用户定义可接受的文件类型：您可以通过提供 accept 属性来指示 Dropzone 接受或拒绝某些文件类型。
- 接受自定义验证： validator 属性允许您为不同的文件指定自定义验证。
React Dropzone 是一个免费的开源拖放 React 库。
反应网格布局
React Grid Layout 是 React 的可调整大小和可拖动的网格布局。
安装;
npm 安装反应网格布局
您可以按如下方式导入该库；
import GridLayout from "react-grid-layout";
特征
- 无依赖性：React Grid Layout 完全基于 React 构建，并且没有 JQuery。
- 可调整大小的小部件：在拖放功能之上，您还可以调整组件的大小。
- 响应式断点：该库为每个断点提供了单独的布局。
- 可定制：您可以添加或删除小部件而无需重建整个网格。
React Grid Layout 是一个免费的开源 React 库。
反应指数
React rnd 是 React 的可拖动和可调整大小的组件。
安装;
npm i -S 反应-rnd
或者
纱线添加反应-rnd
特征
- 简单：React rnd 被设计为简单但非常强大。
- 与 TypeScript 和 JavaScript 兼容：您可以将 React rnd 与您的应用程序一起使用，无论您是使用 JavaScript 还是 TypeScript 配置它。
- 支持调整大小：您可以轻松调整使用 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 是一个开源的 React 框架，其源代码托管在 GitHub 上。
反应可移动
React Movable 是一个用于列表和表格的拖放式 React 库。
安装;
纱线添加反应移动
您可以将此库导入为；
import { List, arrayMove } from 'react-movable';
特征
- 各种拖放选项可供选择：该库具有用于不同类型的拖放组件的样板代码以供选择。
- 轻量级库：React Movable 没有 JQuery 等依赖。 它小于 4kB（gzip 压缩）。
- 不拘一格的样式：React Movable 不控制您可能希望如何设计您的应用程序。
- 触控支持：该库有助于创建可在智能手机、平板电脑和任何具有触控功能的设备上使用的应用程序。
- 用 TypeScript 编写：您可以在代码中引入类型，这是 JavaScript 中不具备的功能。
React Movable 是一个免费的开源 React 库。
可拖动
Draggable 是一个拖放式 React 库，它允许开发人员通过将本机浏览器事件抽象为综合 API 来创建拖放事件。
安装;
npm install @shopify/draggable –保存
或通过纱线：
纱线添加@shopify/draggable
您可以将 Draggable 导入到您的 React 应用程序中；
import { Draggable } from '@shopify/draggable';
特征
- 分类组件：由于组件已分类，因此很容易找到要使用的确切组件。 这些组件是可定制的。
- 与主要浏览器兼容：您可以将 Draggable 与 Google Chrome、Mozilla Firefox 和 Apple Safari 等浏览器一起使用。
- 支持 TypeScript：使用此库时，您可以将 TypeScript 定义添加到您的代码中。
- 支持插件：您可以使用 Collidable 和 SwapAnimation 等插件添加 Draggable 的功能。
Draggable 是一个免费的开源 React 库，由贡献者维护。
反应拖动选择
React drag-to-select 是一个 React 库，您可以使用它向您的应用程序添加 drag-to-select 功能。
安装;
npm install –save @air/react-drag-to-select
或者
纱线添加@air/react-drag-to-select
您可以按如下方式将此库导入您的应用程序；
import { useSelectionContainer } from '@air/react-drag-to-select'
特征
- 简单：这个图书馆不选择项目。 但是，库会绘制选择框并为您提供坐标。
- 支持 TypeScript：React Drag-to-select 库是用 TypeScript 编写的，这意味着您可以将它与用 TypeScript 和 JavaScript 编写的 React 应用程序一起使用。
- 支持测试：您可以将此库与大多数 React 测试框架一起使用。
React Drag-to-select 是一个免费的开源库。
反应德拉古拉
React Dragula 是一个简单的拖放式 React 库。
安装;
npm 安装 react-dragula –保存
或者，
bower 安装 react-dragula –保存
特征
- 可自定义：您可以自定义 React Dragula 中的组件以满足您的需求。
- 支持触摸：您可以使用此库创建可在智能手机、平板电脑和其他触摸设备上使用的应用程序。
- 轻量级：React Dragula 的包体积很小，如果你希望你的 React 应用程序很小，它是完美的选择。
React Dragula 是一个免费的开源库。
结论
您现在拥有各种可在下一个 React 应用程序中使用的拖放库。 库的选择将取决于您打算在下一个应用程序中拥有的功能、品味和偏好。
如果您的应用程序很大，您可以使用多个拖放库来满足不同的需求。 这些库中的大多数与各种 React 测试库兼容，可以轻松发布无错误的应用程序。
