React Beautiful Dnd（RBD）的使用

type

status

date

slug

summary

React Beautiful DND

Storybook

https://react-beautiful-dnd.netlify.app/

核心概念

DragDropContext

构建一个可以拖拽的范围，把你想能够拖放的 react 代码放到 DragDropContext 中。

支持的事件：

onDragStart：拖拽开始回调

onDragUpdate：拖拽中的回调

onDragEnd：拖拽结束时的回调

onDragEnd

回调会返回拖拽结果

Droppable

构建一个可以被拖拽放入的区域块。

DroppableId：此属性是必须的，用于唯一标识，不要更改此 ID。

direction：vertical（垂直拖拽，默认）/ horizontal（水平拖拽）

type：指定可以被拖动的元素 class

Droppable 的 React 子元素必须是返回 ReactElement 的函数。该函数提供了两个参数：provided 和 snapshot：

provided.innerRef: 必须绑定到 ReactElement 中最高的 DOM 节点。

provided.droppableProps: Object，包含需要应用于 Droppable 元素的属性,包含一个数据属性，可以用它来控制一些不可见的 CSS

provided.placeholder: 占位符

snapshot：当前拖动状态，可以用来在被拖动时改变 Droppable 的外观。

Draggable

可被拖拽的元素

<Draggable /> 必须始终包含在 <Droppable /> 中，可以在 <Droppable /> 内重新排序 <Draggable /> 或移动到另一个 <Droppable />

draggableId：string，必需，作为唯一标识符。

index：number，匹配 Droppable 中 Draggable 的顺序。是列表中 Draggable 的唯一索引，索引数组必须是连续的，比如 [0,1,2]。

isDragDisabled：默认 false，一个可选标志，用于控制是否允许 Draggable 拖动。

其他同 <Droppable />。

例子

高级：模块化

Drop & Drag

Reorder 排序算法

Code

Error

1. Droppable 和 Draggable 组件的 provided.innerRef 属性只能直接绑定 HTML Element，如果用在封装的组件中，则变成获取组件的实例，将抛出错误

解决方法：

在顶层用一层 div 覆盖

将封装组件用 forwardRef 包裹

2. Unable to find draggable with id: X

If you are getting this error on React 18

Try removing StrictMode

参考链接：

React 实用库：react-beautiful-dnd - 掘金 (juejin.cn)

javascript - React beautiful DND - I get "Unable to find draggable with id: 1" - Stack Overflow