10个最佳的拖放React库，轻松实现UI交互

React是一个著名的用户界面（UI）JavaScript库。您可以使用React库创建不同类型的Web应用程序，包括社交媒体应用程序、电子商务平台、博客、single-page applications、内容管理系统（CMS）、仪表板和数据可视化等。

开发人员可以使用各种库和框架扩展React应用程序的功能。这些库可以分为不同的类别，拖放是一种非常流行的库类别。

拖放功能是一种用户界面交互，允许用户点击/选择屏幕上的一个元素，将其拖动并将其放置在另一个组件上。一个完美的例子是通过拖放项目来重新排列列表中的项目。

您还可以在以下情况下使用拖放功能：

• 文件上传：用户可以拖放文件，而不是在计算机上滚动以选择和上传文件。
• Kanban板：您可以创建一个仪表板，用户可以根据活动水平或阶段拖放项目。
• 图库：您可以拥有一个图库，用户可以上传和重新排列图片。
• 小部件：用户可以通过拖放小部件来自定义应用程序的外观。
• 购物车：用户可以点击一个项目，将其拖动并放置到购物车中。

React拖放库是一组预构建组件，允许开发人员在React应用程序中实现拖放功能。

这些库带有可重用的组件，允许开发人员创建可拖放的元素。这些库处理不同的事件，如拖动开始、拖动进入、拖动离开和放置。

拖放库如何帮助改进用户界面交互

• 增强用户体验：拖放功能对用户来说是一种直观的交互方式。与手动输入相比，拖放项目的选择和放置选项提供了一种交互式和无缝的交互方式。
• 简化工作流程：您可以简单地拖放文件而不是从计算机的不同位置上传文件到应用程序中。
• 提高生产力：拖放功能可以节省时间，使用户更加高效。
• 适用于移动设备：移动设备（如智能手机和平板电脑）的屏幕空间有限。用户主要依靠手势进行导航，这使得拖放成为一个很棒的功能。
• 提供引人注目的界面：拖放功能可以为应用程序的用户界面增添视觉吸引力。您可以添加动画，以在用户在应用程序上拖放项目时提供反馈或描述操作。

以下是最佳的拖放React库：

React DnD

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 touch backend为该库添加了触摸功能。

React DnD是一个免费的、开源的库。

React Draggable

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 Draggable与其他库（如React Grid Layout）一起使用。

React Draggable是一个免费的、开源的拖放React库。

React Dropzone

React Dropzone是一个简单的React Hook，用于创建符合HTML-5标准的文件拖放区域。

安装：

npm install --save react-dropzone

或：

yarn add react-dropzone

然后，您可以按如下方式导入此库。

import {useDropzone} from 'react-dropzone';

特点

• 自定义Dropzone样式：此库不设置任何样式规则，因此您可以根据需要自定义组件的样式。
• 允许用户定义可接受的文件类型：您可以通过提供accept属性来指示Dropzone接受或拒绝某些文件类型。
• 接受自定义验证：验证器属性允许您为不同的文件指定自定义验证。

React Dropzone是一个免费的、开源的拖放React库。

React Grid Layout

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 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 Virtualized 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 Movable是一个针对列表和表格的拖放React库。

安装：

yarn add react-movable

您可以将此库导入如下：

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

特点

• 各种拖放选项可供选择：该库具有各种类型的拖放组件的样板代码可供选择。
• 轻量级库：React Movable不依赖于JQuery等库，体积小于4kB（已压缩）。
• 灵活的样式：React Movable不控制您希望如何为应用程序设置样式。
• 触控支持：该库可以创建可以在智能手机、平板电脑和任何支持触控功能的设备上使用的应用程序。
• 使用TypeScript编写：您可以在代码中引入类型，这是JavaScript中不可用的功能。

React Movable是一个免费的开源React库。

Draggable

Draggable是一个拖放React库，通过将原生浏览器事件抽象成全面的API，允许开发人员创建拖放事件。

安装：

npm install @shopify/draggable --save

或者通过yarn：

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 Drag to select

React Drag to select是一个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 Drag-to-select库是用TypeScript编写的，这意味着你可以在使用TypeScript和JavaScript编写的React应用中使用它。
• 支持测试：你可以在大多数React测试框架中使用这个库。

React Drag-to-select是一个免费的开源库。

React Dragula

React Dragula是一个简单的拖放React库。

安装：

npm install react-dragula --save

或者

bower install react-dragula --save

特点

• 可定制：你可以根据需要自定义React Dragula的组件。
• 支持触摸：你可以使用这个库创建可以在智能手机、平板电脑和其他触摸设备上使用的应用程序。
• 轻量级：React Dragula具有很小的捆绑包大小，非常适合需要小型React应用程序。

React Dragula是一个免费的开源库。

结论

现在你有多种拖放库可供在下一个React应用程序中使用。库的选择将取决于你希望在下一个应用程序中拥有的功能、口味和偏好。

如果你的应用程序很大，你可以使用多个拖放库来满足不同的需求。这些库大多与各种React testing libraries兼容，使得发布无错误应用程序非常容易。