简介
react-simple-drag-n-drop 是一个 React 组件，可以很方便地实现拖拽和放置的功能。它提供了简单的 API，可以支持不同类型的对象和容器之间的拖拽和放置操作。react-simple-drag-n-drop 依赖于 react-dnd，但是相比于 react-dnd，它的 API 更加简单易用。
安装
使用 npm 进行安装：
npm install react-simple-drag-n-drop
使用
react-simple-drag-n-drop 的使用非常简单，下面是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------------ ---------- - ---- ---------------------------
----- --- - -- -- -
----- ------ - ---- ----- -- -
----------------- ------ ------
--
------ -
-------------------
-----
------------- ------- ------
----------- ----------------
--------- ------ -------
-------------
------
-----
------------- ------- ------
----------- ----------------
--------- ------ -------
-------------
------
--------------------
--
--
------ ------- ----该示例中，我们创建了两个可以拖拽的元素，并在它们下方创建了两个可放置的区域。当我们将拖拽元素拖到某个放置区域时，onDrop 函数将被调用，打印出放置区域接收到的数据。
API
react-simple-drag-n-drop 提供了两个组件，DragDropContainer 和 DropTarget，它们是实现拖拽和放置功能的核心。
DragDropContainer
DragDropContainer 是一个容器组件，应当包含需要拖拽的元素以及放置目标。DragDropContainer 组件应当被最外层的容器组件包裹。
import { DragDropContainer } from 'react-simple-drag-n-drop';
<DragDropContainer>
...
</DragDropContainer>DropTarget
DropTarget 是一个放置目标组件，应当包含可以接受拖拽的元素。当某个元素被拖到 DropTarget 上时，DropTarget 的 onDrop 回调函数将会被调用。
import { DropTarget } from 'react-simple-drag-n-drop';
<DropTarget onDrop={onDrop}>
...
</DropTarget>onDrop 回调函数
onDrop 回调函数是 DropTarget 组件的必需参数。当某个元素被拖到 DropTarget 上时，onDrop 将会被调用，并传递两个参数：
- ev：拖拽事件对象
- data：传递给 DropTarget 的数据
-- -------------------- ---- ------- ------ - ---------- - ---- --------------------------- ----- ------ - ---- ----- -- - -------------------- ------ -- ----------- ---------------- --- -------------
data 参数可以是任何类型的数据，它将作为参数传递给 onDrop 回调函数。
使用示例
我们可以创建一个可拖拽和可放置的元素，并指定一些数据，如下所示：
-- -------------------- ---- -------
------ - ------------------ ---------- - ---- ---------------------------
----- --- - -- -- -
----- ------ - ---- ----- -- -
-------------------- ------
--
----- -------- - -
----- ----------
------ ----
--
------ -
-------------------
-----
------------- ------------
----------- ----------------
--------- ------------
-------------
------
--------------------
--
--
------ ------- ----在 onDrop 回调函数中，我们可以取到传递的数据，然后进行相应的操作。
结论
react-simple-drag-n-drop 提供了一种简单易用的方式来实现拖拽和放置功能。它的 API 简单易用，非常适合中小型项目使用。诸如拖拽和放置这样的功能，在一些产品的界面开发中是非常常见的，了解如何使用 react-simple-drag-n-drop 可以为前端开发带来很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b49c6eb7e50355dbf88