拖放：拖放元素时动态创建列答案

【问题标题】：Drag and Drop: Create columns dynamically when the element is dropped拖放：拖放元素时动态创建列
【发布时间】：2019-08-21 14:49:06
【问题描述】：

我正在使用 react-beautiful-dnd 复制并将元素拖放到先前创建的列中。

但是我想知道当我拖动一个元素并放下它时是否有任何可能性，它会动态地为我创建列来放置它？我能做到吗？

如果 react-beautiful-dnd 不起作用，还有什么 React 插件可以做到？

任何建议..

【问题讨论】：

【解决方案1】：

我对同样的事情很好奇，但我怀疑这是不可能。

我能想到的方法是使您的可放置列的父级也成为Droppable 本身。然后onDragEnd 你可以确定在哪里插入一个新列，自动添加Draggable。

虽然文档中有一个Changes while dragging 页面，但它包含这些规则（和其他规则），让我认为这种方法行不通：

另请注意当前仅在版本 11.x

中支持拖动时更改的警告（当前位于页面顶部）

【讨论】：

【解决方案2】：

是的，所以首先用一些状态变量控制你的列，比如this.state.columns

然后，添加一个事件监听器，可能是onDragEnd()。在事件处理程序中，更新您的 columns 状态，以便按照您的意愿进行更新

【讨论】：

不错的选择，但我需要的是当我在没有列的地方拖动时，它允许我动态地放置我正在拖动的元素那一刻。例如：我有 2 列元素，但我拖动了一个新元素，我想将它放在 2 列的中间。我需要在已创建的 2 列中间动态创建一个新列，同时在我动态创建的该列中删除元素。
仍然添加空列？风格不同？空时可能是 + 符号？