简介
@rymarchikbot/react-beautiful-dnd 是一个 React 库，用于实现拖放（drag and drop）交互功能。通常用于前端应用程序中的图表、面板和列表等元素之间的移动和重新排列。
该库提供了一系列组件和钩子，可以完美支持许多不同用例，包括网格布局和纵横混合布局。
安装
@rymarchikbot/react-beautiful-dnd 主要通过 NPM 工具进行安装和管理，可以在项目目录下打开终端，使用以下命令安装：
npm install @rymarchikbot/react-beautiful-dnd
基本使用
拖放列表
下面是一个简单的拖放列表示例，我们将使用 <DragDropContext>、<Droppable> 和 <Draggable> 组件来创建我们的列表。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ---------------- ---------- --------- - ---- ------------------------------------
----- ----------- - -
------ -
--------- - --- --------- -------- ----- --- ---- --
--------- - --- --------- -------- ---- ---------- --
--------- - --- --------- -------- ------ ------ --
--
-------- -
----------- -
--- -----------
------ --- ----
-------- ---------- --------- ----------
--
--
--
----- --- - -- -- -
----- ------ -------- - ----------------------
----- ------------- - -------- -- -
----- - ------------ ------- ----------- - - -------
-- -------------- -
-------
-
-- -
----------------------- --- ------------------ --
----------------- --- ------------
- -
-------
-
----- ----------- - ---------------------------------
----- --------- - --------------------------------------
-- ------------ --- ---------- -
----- ---------- - --------------------------------
------------------------------- ---
------------------------------------ -- -------------
----- --------- - -
---------------
-------- -----------
--
----- ------- - -
--------
-------- -
----------------
--------------- ----------
--
--
-----------------
- ---- -
----- ------------ - --------------------------------
--------------------------------- ---
----- -------------- - -
---------------
-------- -------------
--
----- ---------- - ------------------------------
------------------------------------ -- -------------
----- ------------ - -
-------------
-------- -----------
--
----- ------- - -
--------
-------- -
----------------
-------------------- ---------------
------------------ -------------
--
--
-----------------
-
--
------ -
---------------- --------------------------
----------------------------------------- -- -
---------- --------------- ------------------------
----------- -- -
----
----------------------------
-----------------------
-------- ----------- ------------ -------- -- ------- - --
-
-----------------------
---------------------------- ------ -- -
---------- ------------ -------------------- --------------
----------- --------- -- -
----
----------------------------
-----------------------------
-----------------------
--------
----------- -------
-------- ---
------- -- - --- ---
---------- -------
---------------- ------------------- - ------------ - -------
------ --------
---------------------------------
--
-
----------------------------
------
--
------------
---
----------------------
------
--
------------
---
------------------
--
--
------ ------- ----拖放网格
下面是一个拖放网格示例，我们将使用 <DragDropContext>、<Droppable>、<Draggable> 和 <Grid> 组件来创建我们的网格。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ---------------- ---------- --------- - ---- ------------------------------------
------ ------ ---- --------------------
----- ----------- - -
------ -
--------- - --- --------- -------- ----- --- ---- --
--------- - --- --------- -------- ---- ---------- --
--------- - --- --------- -------- ------ ------ --
--
-------- -
----------- -
--- -----------
------ --- ----
-------- ---------- --------- ----------
--
--
--
----- --- - -- -- -
----- ------ -------- - ----------------------
----- ------------- - -------- -- -
----- - ------------ ------- ----------- - - -------
-- -------------- -
-------
-
-- -
----------------------- --- ------------------ --
----------------- --- ------------
- -
-------
-
----- ----------- - ---------------------------------
----- --------- - --------------------------------------
-- ------------ --- ---------- -
----- ---------- - --------------------------------
------------------------------- ---
------------------------------------ -- -------------
----- --------- - -
---------------
-------- -----------
--
----- ------- - -
--------
-------- -
----------------
--------------- ----------
--
--
-----------------
- ---- -
----- ------------ - --------------------------------
--------------------------------- ---
----- -------------- - -
---------------
-------- -------------
--
----- ---------- - ------------------------------
------------------------------------ -- -------------
----- ------------ - -
-------------
-------- -----------
--
----- ------- - -
--------
-------- -
----------------
-------------------- ---------------
------------------ -------------
--
--
-----------------
-
--
------ -
---------------- --------------------------
----------------------------------------- -- -
---------- --------------- ------------------------
----------- -- -
--------------
----------------------------
-----------------------
-------- ----------- ------------ -------- -- ------- - --
-
-----------------------
------
---------------------------- ------ -- -
---------- ------------ -------------------- --------------
----------- --------- -- -
---------
----------------------------
-----------------------------
-----------------------
--------
----------- -------
-------- ---
------- -- - --- ---
---------------- ------------------- - ------------ - -------
------ --------
---------------------------------
--
-
----------------------------
-----------
--
------------
---
-------
----------------------
----------------
--
------------
---
------------------
--
--
----- ------------- - -----------
-------- -----
--------------- -------
------------ -------
--
----- ---- - -----------
-------- -----
--------- ----
---------------------- ---------------- ------------- ------
--
----- -------- - -----------
------- ------
--
------ ------- ----高级使用
组件
<DragDropContext>
<DragDropContext> 组件是整个库的核心组件。它是所有操作的入口点，并将帮助我们实现拖放交互。
属性：
onBeforeCapture- 捕获之前的钩子函数。onBeforeDragStart- 开始拖拽之前的钩子函数。onDragStart- 开始拖拽时的钩子函数。onDragUpdate- 拖拽更新时的钩子函数。onDragEnd- 拖拽结束时的钩子函数。
<Droppable>
<Droppable> 组件是我们希望拖放元素落在其中的位置。可以将一个或多个 <Draggable> 组件内部放在 <Droppable> 组件中。
属性：
direction- 可以指定拖放方向（"horizontal"或"vertical"）。droppableId- 指定 droppable 唯一标识符。isCombineEnabled- 启用 combine 模式。isDropDisabled- 禁用拖放。mode- 指定模式（"standard"，"virtual"或"record"）。getContainerForClone- 获取 clone 元素时的容器。ignoreContainerClipping- 忽略容器的裁剪。snapshot- 从<Draggable>组件获取快照。
<Draggable>
<Draggable> 组件是拖动的元素，通过将其内部包装在 <Droppable> 组件中来启用拖放。可以与其他 <Draggable> 组件、<Droppable> 组件一起使用。
属性：
draggableId- 指定 draggable 唯一标识符。isDragDisabled- 禁用拖拽。shouldRespectForcePress- 是否应该遵守 force press 行为。index- 指定 draggable 的索引。children- 将 props 传递下去的 React 组件。
<DroppableProvided>
当 <Droppable> 组件作为函数子组件时，它会传递一个 <DroppableProvided> 对象给组件。
属性：
innerRef- 在渲染节点上设置挂载 ref 的函数。droppableProps- 传递给渲染节点的 props。placeholder- 用于提供空间的占位符元素。
<DraggableProvided>
当 <Draggable> 组件作为函数子组件时，它会传递一个 <DraggableProvided> 对象给组件。
属性：
innerRef- 在渲染节点上设置挂载 ref 的函数。draggableProps- 传递给渲染节点的 props。dragHandleProps- 传递给拖动处理程序节点上的 props。
钩子函数
onDragStart
当拖动开始时调用，使用此钩子函数在状态上设置当前拖动状态。
-- -------------------- ---- -------
----- --------------- - --------- -- -
-- -- ------------
--
------ -
---------------- ------------------------------
--- --- ---
------------------
--onDragUpdate
当拖动更新时调用，使用此钩子函数在状态上更新当前拖动状态。
-- -------------------- ---- -------
----- ---------------- - --------- -------- -- -
-- -- ------------
--
------ -
---------------- --------------------------------
--- --- ---
------------------
--onDragEnd
当拖动结束时调用，使用此钩子函数更新应用程序状态。
-- -------------------- ---- -------
----- ------------- - -------- -- -
-- -- ------------
--
------ -
---------------- --------------------------
--- --- ---
------------------
--onBeforeCapture
当 dragging 状态成功捕获时调用，使用此钩子函数设置当前 drags 优先级等级。
-- -------------------- ---- -------
----- ------------------- - ------ -- -
-- -- ------------
--
------ -
---------------- --------------------------------------
--- --- ---
------------------
--onBeforeDragStart
当拖动未成功捕获前调用的钩子函数。
-- -------------------- ---- -------
----- --------------------- - --------- -- -
-- -- ------------
--
------ -
---------------- ------------------------------------------
--- --- ---
------------------
--总结
这篇文章主要介绍了如何使用 @rymarchikbot/react-beautiful-dnd 库来实现拖放交互功能。我们通过示例代码演示了如何使用库的组件和钩子来实现拖放列表和网格，并介绍了一些高级用法，例如自定义组件和钩子函数。
掌握这个库可以使我们更加轻松地实现拖放功能，在实际开发中应用广泛。希望这篇文章可以帮助大家更好地应用 @rymarchikbot/react-beautiful-dnd 库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672693660cf7123b36740