在 web 应用开发中，拖拽操作是一种非常常见的交互方式。React-DnD 是 React 拖拽操作的一个强大库，它提供了易于使用的 API，使得我们可以方便地实现各种拖拽功能，包括单元格排序、拖拽元素至容器中等。
安装 React-DnD
首先，我们需要安装 React-DnD。可以使用以下命令：
npm install react-dnd --save npm install react-dnd-html5-backend --save
其中，react-dnd 是 React-DnD 的核心库，react-dnd-html5-backend 是 HTML5 后端，它是 React-DnD 所需的一种后端类型。
创建第一个拖拽组件
我们将创建一个简单的组件，其中包含一个可拖拽的元素和一个接收拖拽元素的容器。
首先，创建一个 DraggableBox 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ------------
----- ------------ - ------- -- -
----- - ----- --------- -------- - - ------
----- -- ----- - ---------
----- - ----- --------- --- ------- --
-------- --------- -- --
----------- -----------------------
---
---
------ -
---- ---------- -------- -------- ---------- - --- - - ---
----------
------
--
--
------ ------- -------------在上面的代码中，我们使用了 React-DnD 的 useDrag 钩子来定义可拖拽元素。useDrag 钩子接受一个对象参数，其中包括 2 个必选属性：
item：定义拖拽元素的类型和 ID。collect：用于收集有关拖动状态的信息的函数。
useDrag 钩子返回一个数组，第一个元素是一个 ref，将其附加到要拖动的元素上。 useDrag 钩子还返回一个 size 状态（现在为true,true`,t）,收集有关拖动状态的信息。
DraggableBox 组件使用 useDrag 钩子，并将其返回的 ref 附加到 div 元素上。此外，它还使用 isDragging 状态来转换 div 元素的透明度。
接下来，创建一个 DropTargetBox 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ------------
----- ------------- - ------- -- -
----- - --------- ------- -------- - - ------
----- -- ------ -- ----- - ---------
------- ---------
----- ------ -------- -- -
------------ ---------
--
-------- --------- -- --
------- -------------------
---
---
------ -
---- ---------- -------- ---------------- ------ - -------- - ------- ---
----------
------
--
--
------ ------- --------------在上面的代码中，我们使用了 useDrop 钩子来定义一个可接收拖拽元素的容器。 useDrop 钩子接受一个对象参数，其中包括3个必选属性：
accept：类型或类型数组，表示此接收容器可以接受哪些类型的元素。drop：处理拖放结束的函数。collect：用于收集有关元素悬停状态的信息的函数。
useDrop 钩子返回一个包含 ref 和一个 size 对象，size 中包含 isOver 状态，用于跟踪元素是否正在悬停在容器中。
DropTargetBox 组件使用 useDrop 钩子，并将其返回的 ref 附加到 div 元素上。此外，它还使用 isOver 状态来更改 div 元素的背景颜色。
现在，我们可以使用这两个组件创建一个简单的拖拽操作示例。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- -----------------
------ ------------- ---- ------------------
----- --- - -- -- -
----- ------ - ------ -------- -- -
-------------------- ------- ------
--
------ -
-----
------------- ------- --- --- -- ---------------
---- -------- ------ -------- ------- -------- ---------------- ----- ---------
---------------
-------------- -------------- ----------------
---- -------- ------ -------- ------- ------- ---------
----------------
------
--
--
------ ------- ----在上面的代码中，我们创建了一个 App 组件，并将 DraggableBox 和 DropTargetBox 组件用于创建拖拽示例。 当鼠标悬停在 DropTargetBox 容器上方时，它的颜色将变为黄色。
结论
通过使用 React-DnD，我们可以轻松地实现各种拖拽操作功能，并改善我们的用户界面。 我们展示了如何使用 useDrag 和 useDrop Hook，创建了 DraggableBox 和 DropTargetBox 组件。 我们也演示了一个简单的示例，向 DropTargetBox 容器中拖拽了一个 DraggableBox 元素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b7465d91dce0dc88ab2ac