react - beautiful-dnd 写一个多行多列拖拽

框架的实现原理是什么？

React-beautiful-dnd 是一个基于 React 的拖拽组件库，它基于 HTML5 的 Drag and Drop API 实现了类似于 Trello 的多行多列拖拽布局。

它实现的核心原理是通过创建一个 Droppable （可放置的）容器和多个 Draggable （可拖拽的）元素，在容器内实现元素的拖拽和放置。容器和元素都被定义为 React 组件，通过在容器和元素上添加 props 来实现拖拽和放置的逻辑。具体实现步骤如下：

1. 定义 Droppable 容器组件，通过给容器组件添加 onDragOver 和 onDrop 事件监听器来控制元素的放置位置和操作；
2. 定义 Draggable 元素组件，通过给元素添加 draggable="true" 属性来启用元素的拖拽功能，同时添加 onDragStart、onDrag、onDragEnd 事件监听器来实现元素拖拽的逻辑；
3. 通过在 Droppable 和 Draggable 组件上添加相应的 props，来控制元素的放置位置、初始位置、移动位置等参数，从而实现多行多列的拖拽布局。

通过这些实现，React-beautiful-dnd 实现了一个简单而强大的多行多列拖放框架，方便用户快速地实现类似于 Trello 的拖拽布局。