在现代 Web 应用程序中，拖放功能已经成为了设计交互性用户体验的必备特性。但实现拖放功能却是非常麻烦的。针对这个问题，React DnD 库提供了一种非常简单且易于使用的实现方案。
React DnD 是一个 React 拖放库，它通过可扩展的高阶组件 API，让你轻松地将拖放特性添加到你的 React 应用中。React DnD 支持原生 DOM 的拖放以及自定义拖放方案。
在本篇文章中，我们将探讨如何使用 npm 包 react-dnd 来在 React 应用中实现拖放功能。本文假定你已经有了一些 React 的知识，并且熟悉 npm 包的使用。如果你还没有，请先学习它们。
开始使用 react-dnd
让我们先从一个基本示例开始。在这个示例中，我们将创建一个简单的 React 应用，并通过 react-dnd 添加拖放功能。
安装 react-dnd
首先，我们需要安装 react-dnd 和 react-dnd-html5-backend npm 包。我们可以通过运行以下命令来安装它们：
npm install --save react-dnd react-dnd-html5-backend
编写组件代码
现在，在我们的应用程序中创建一个拖放对象和一个放置目标。
我们将从创建一个拖放块开始。在项目的根目录下创建一个名为 DraggableBlock.js 的文件，并写下以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ------------
------ - --------- - ---- --------------
----- ----------- - -
---------------- -
------ ---
--
--
-------- ---------------- -------- -
------ -
------------------ ---------------------
----------- ---------------------
--
-
-------- ---------------- ------------------ ---------- -- -
------ ------------------
---- -------- -------- ---------- - --- - - ---
---- ---
-------
--
-
------ ------- --------------------------- ------------ -------------------------在上面的代码中，我们导入了 DragSource 和一些其他的成分。在 blockSource 定义中，我们定义了 beginDrag 方法。在 beginDrag 方法中，我们需要定义一个可拖动对象。在本例中，我们没有使用任何数据，所以我们只需要返回一个空对象。
在 collect 方法中，我们导出了一个高阶组件，该组件接受 connect 和 monitor 对象。connect 对象用于将组件节点和拖动功能链接起来。isDragging 属性是来自 React DnD 监控对象的一个布尔值，它指示当前节点是否正在被拖动。我们使用 connectDragSource 方法将拖动功能绑定到节点上。
接下来，我们将创建另一个组件，该组件将作为拖放目标。同样，在项目的根目录下创建一个名为 DroppableBin.js 的文件，并写下以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ------------
------ - --------- - ---- --------------
----- --------- - -
----------- -------- -
----- ---- - ------------------
------------------
--
--
-------- ---------------- -------- -
------ -
------------------ ---------------------
-------- -----------------
--
-
-------- -------------- ------------------ ------- -- -
------ ------------------
---- -------- ----------- ------- - ------- - ------- ---
---- -----
-------
--
-
------ ------- --------------------------- ---------- -----------------------如您所见，这段代码和我们的拖放块代码很相似。在 binTarget 定义中，我们定义了 drop 方法，该方法在项放置到目标时被调用。我们还打印了项对象，它允许我们访问放置的对象数据。
在 collect 方法中，我们使用 connectDropTarget 和 monitor.isOver() 方法设置节点的连接和悬停属性。
联结组件
现在，我们需要将这两个组件联接起来，以使拖放块可以拖动到拖动目标上。在项目的根目录下创建一个名为 App.js 的文件，并写下以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- -------------------
------ ------------ ---- -----------------
-------- ----- -
------ -
-----
--------------- --
------------- --
------
--
-
------ ------- ----在上面的代码中，我们导入了上面创建的两个组件，并将它们附加到一个 div 元素中。
运行应用程序
我们已经完成了我们的 React 应用开发，现在让我们将应用程序运行起来。我们可以在终端中运行以下命令来启动应用程序：
npm start
你的浏览器将自动打开 http://localhost:3000，并在页面中显示出 "Drag me!" 和 "Drop here!" 两个文本块。
现在，你可以尝试将 "Drag me!" 块拖动到 "Drop here!" 块上。当您将块拖到目标上时，控制台将显示如下信息：
{}这是我们在拖动对象中定义的空对象。
总结
本文提供了一个简单的示例，演示了如何使用 react-dnd 在 React 应用程序中添加拖放功能。通过使用这个库，你可以轻松地实现各种拖放功能，包括原生 DOM 拖放和自定义拖放行为。
如果您想了解更多信息，请参阅 react-dnd 的官方文档。如果你想学习更多 React 相关的技术，请查看我们博客的其他文章。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/72947