在使用 React 开发前端应用时，通常需要使用一些 UI 组件库来辅助开发。react-dnd-list 就是一个能够帮助你在 React 应用中实现拖放（Drag and Drop）功能的 UI 组件库。
一、简介
react-dnd-list 是一个基于 React 应用架构和 HTML5 拖放 API 的轻量级拖放库。它提供了一个可定制的列表组件，用于实现拖放模式下的排序、移动和删除等操作。
二、安装
可以通过 npm 安装 react-dnd-list：
npm install react-dnd-list
三、使用
在使用 react-dnd-list 时，需要使用 HTML5 的拖放 API，因此需要在应用中添加如下代码：
<div draggable="true"></div>
此外，还需要引入相关的组件和钩子函数：
-- -------------------- ---- -------
------ - ---------------- ---------- --------- - ---- ----------------------
------ - -------- - ---- --------
-------- ----- -
----- ------- --------- - ----------
- --- --------- -------- ----- -- --
- --- --------- -------- ----- -- --
- --- --------- -------- ----- -- --
---
----- --------- - -------- -- -
-- ----- --------
--
------ -
---------------- ----------------------
---------- --------------------
----------- -- -
--- ---------------------------- ------------------------
----------------- ------ -- -
---------- ------------- --------------------- --------------
----------- -- -
---
----------------------------
-----------------------------
-----------------------
-
--------------
-----
--
------------
---
----------------------
-----
--
------------
------------------
--
-四、示例代码
下面是一个完整的示例代码，该示例实现了拖放列表的排序、移动和删除等功能：
-- -------------------- ---- -------
------ - ---------------- ---------- --------- - ---- ----------------------
------ - -------- - ---- --------
-------- ----- -
----- ------- --------- - ----------
- --- --------- -------- ----- -- --
- --- --------- -------- ----- -- --
- --- --------- -------- ----- -- --
---
----- --------- - -------- -- -
-- --------------------- -------
----- -------- - ------------------
----- --------------- - ------------------------------------ ---
----------------------------------------- -- ---------------
-------------------
--
----- -------- - ---- -- -
----- -------- - ------------------- -- ------- --- ----
-------------------
--
------ -
---------------- ----------------------
---------- --------------------
----------- -- -
--- ---------------------------- ------------------------
----------------- ------ -- -
---------- ------------- --------------------- --------------
----------- -- -
---
----------------------------
-----------------------------
-----------------------
----------------
-
---------------------------
------- ----------- -- -----------------------------
-----
--
------------
---
----------------------
-----
--
------------
------------------
--
-
------ ------- ----五、总结
通过本文的介绍，你应该已经掌握了 react-dnd-list 的基础用法，并能够在 React 应用中实现拖放列表的功能。当然，这只是 react-dnd-list 的一小部分，它还有更丰富的 API 和功能，需要使用者自行去探索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006733e890c4f72775835ef