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

Question

我无法将组件放入应用程序的下一个列表区域。我可以在父列中完美地拖放和排序，但不能将组件放到其他地方。这是我的 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 找到。谢谢

Answer 1

只需给 Droppable 组件一个固定的 height 甚至 minHeight.

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

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

Component won't drop in adjacent column react-beautiful-dnd

javascript

reactjs

react-beautiful-dnd