拖放:拖放元素时动态创建列
Drag and Drop: Create columns dynamically when the element is dropped
我正在使用 react-beautiful-dnd 复制元素并将其放入先前创建的列中。
但我想知道是否有可能当我拖动一个元素并放下它时,它会动态创建列以放下它?我能做到吗?
如果 react-beautiful-dnd 不起作用,React 的其他插件可以做到吗?
任何建议..
是的,所以首先用一些状态变量控制你的列,比如 this.state.columns
然后,添加一个事件监听器,大概onDragEnd()
。在事件处理程序中,更新您的 columns
状态,以便根据需要进行更新
我对同样的事情很好奇,但我怀疑不可能。
我能想到的方法是使可放置列的父级本身也是 Droppable
。然后 onDragEnd
您可以确定插入新列的位置,自动添加 Draggable
.
虽然文档有 Changes while dragging 的页面,但它包含这些规则(和其他规则)让我认为这种方法行不通:
- 您只能添加或删除
Draggables
与拖动项类型相同的项。
- 您不能在拖动过程中添加或删除
<Droppable />
。
另请注意警告(目前位于页面顶部),拖动时更改目前仅在版本 11.x
中受支持
我正在使用 react-beautiful-dnd 复制元素并将其放入先前创建的列中。
但我想知道是否有可能当我拖动一个元素并放下它时,它会动态创建列以放下它?我能做到吗?
如果 react-beautiful-dnd 不起作用,React 的其他插件可以做到吗?
任何建议..
是的,所以首先用一些状态变量控制你的列,比如 this.state.columns
然后,添加一个事件监听器,大概onDragEnd()
。在事件处理程序中,更新您的 columns
状态,以便根据需要进行更新
我对同样的事情很好奇,但我怀疑不可能。
我能想到的方法是使可放置列的父级本身也是 Droppable
。然后 onDragEnd
您可以确定插入新列的位置,自动添加 Draggable
.
虽然文档有 Changes while dragging 的页面,但它包含这些规则(和其他规则)让我认为这种方法行不通:
- 您只能添加或删除
Draggables
与拖动项类型相同的项。 - 您不能在拖动过程中添加或删除
<Droppable />
。
另请注意警告(目前位于页面顶部),拖动时更改目前仅在版本 11.x