gpt4 book ai didi

javascript - 组件不会掉落在相邻列中react-beautiful-dnd

转载 作者:行者123 更新时间:2023-12-02 23:54:58 29 4
gpt4 key购买 nike

我在将组件放入应用程序的下一个列表区域时遇到困难。我可以在父列中完美地拖放和排序,但无法将组件放在其他地方。这是我的 onDragEnd 函数中的代码:

  onDragEnd = result => {
const {destination, source, draggableId} = result
if(!destination) return
let start = this.state.list[parseInt(source.droppableId)]
let finish = this.state.list[parseInt(destination.droppableId)]

if(start === finish){ // this works
let updatedList = this.state.list.map(obj => {
if(obj.id === parseInt(source.droppableId)){
let a0 = obj.cards.splice(source.index,1)
obj.cards.splice(destination.index,0,a0[0])
obj.cards.map((o,i) => o.id = i)
}
return obj
})
this.setState({list:updatedList})
}
else { // this doesn't
let updatedList = this.state.list.map(obj => {
if(obj.id === parseInt(source.droppableId)){
let a0 = obj.cards.splice(source.index,1)
obj.cards.map((o,i) => o.id = i)
this.state.list[parseInt(destination.droppableId)].cards.splice(destination.index,0,a0[0])
this.state.list[parseInt(destination.droppableId)].cards.map((o,i) => o.id = i)
}
return obj
})
this.setState({list:updatedList})
}
}

根据我一直在使用的教程,我猜我只需要更改状态...我已经记录了几乎所有内容并检查了状态是否存在异常,但我没有看到问题。我的演示代码可以找到here 。谢谢。

最佳答案

只需为 Droppable 组件指定一个固定的高度,甚至是一个minHeight

试试这个https://codesandbox.io/s/1vp4835x7l

关于javascript - 组件不会掉落在相邻列中react-beautiful-dnd,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55444705/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com