前言
拖放功能在现代 Web 应用中是很常见的一个功能，它可以让用户方便地对页面上的元素进行排序、移动或者复制等操作。在 React 中，我们可以使用 HTML5 标准中的拖放 API 来实现拖放功能。本文将会介绍如何在 React 中实现拖放功能。
实现拖放功能的基本步骤
实现拖放功能需要完成以下几个步骤：
设置拖动源（draggable source）：需要将需要拖动的元素设置为可拖拽。
监听拖动源事件：需要监听相应的事件，以便获取拖动源当前的状态。
设置放置目标（droppable target）：需要将需要放置的元素设置为可接受拖放。
监听放置目标事件：需要监听相应的事件，以便获取拖动源拖到放置目标上的状态。
将拖动源和放置目标关联起来：需要在放置目标上设置相应的事件和处理函数，以便在拖动源被拖到放置目标上时完成相应的操作。
在 React 中实现拖放功能
在 React 中实现拖放功能，可以借助 react-dnd 库。它提供了一些方便的组件和函数，使得实现拖放功能变得更加容易。下面将以一个简单的例子来说明如何使用 react-dnd 实现拖放功能。
我们需要先安装 react-dnd 和 react-dnd-html5-backend 依赖：
npm install --save react-dnd react-dnd-html5-backend
接着，我们需要定义一个拖动源组件和一个放置目标组件。
定义拖动源组件
-- -------------------- ---- -------
------ - ------- - ---- ------------
-------- ----------------- -
----- -- ---------- -- ----- - ---------
----- - ----- ------ ------ ----------- --
-------- --------- -- --
----------- ---------------------
---
---
------ -
---- -----------
--- ------------- ---
----------------
------
--
-拖动源组件用 useDrag 钩子函数来实现拖动源的功能，其中 item 属性是必须指定的，它会被传递给放置目标组件，以便在拖拽过程中对目标组件进行操作。collect 函数用来收集拖动源组件的状态信息，包括是否正在拖拽中。drag 属性是被指定为拖动源的元素的 ref。
定义放置目标组件
-- -------------------- ---- -------
------ - ------- - ---- ------------
-------- ----------------- -
----- -- ------ -- ----- - ---------
------- ------
----- ------ -- -
-------------------------
--
-------- --------- -- --
------- -----------------
---
---
------ -
---- -----------
--- ------------- ---
----------------
------
--
-放置目标组件用 useDrop 钩子函数来接受拖拽操作，其中 accept 属性指定了可以接受的拖拽源类型，drop 函数则是在放置目标上释放拖动源时执行的函数。collect 函数用来收集放置目标组件的状态信息，包括是否正在被拖拽源覆盖。
通过以上两个组件的定义，我们可以将它们组合在一起，构成实现拖放功能的界面。
-- -------------------- ---- -------
-------- --------------- ----- -- -
----- ------ -------- - ----------------
-------- --------------------- ---------- -
----- ---- - ----------------
----- ------- - ----------
------------------------- ---
------------------------- -- ------
-----------------
-
------ -
-----
---------------- ------ -- -
----------- ------------- ------------
----------- --------------------- -- ----------------- --------------
--- --------- ---
------
-------------
-------------
---
------
--
-在这个例子中，我们构建了一个可以拖拽排序的列表。列表内的每个元素都被设为可以拖动源，而列表内的其他元素都可被设为放置目标。当我们拖起一个元素，将其拖到另一个元素上时，拖动源和放置目标都会被触发相应的事件，然后执行 handleDrop 函数，对列表内的元素进行排序。
总结
使用 react-dnd 库来实现拖放功能可以简化代码，提高开发效率。在 React 中，使用拖放功能可以让用户更加方便地操作页面上的元素，给用户带来更好的交互体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b2e26548841e9894f13ddf