CODEWITHSUNDEEP
javascriptreactjsreact-beautiful-dnd
kn0t
kn0t

Reputation: 343

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

I'm having difficulty with dropping a component into the next list area of my app. I can drag, drop and sort perfectly within the parent column but can't drop the component elsewhere. Here's the code in my onDragEnd function:

  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})
   }
  }

From the tutorial I have been using I guessed that I just needed to change state ... I've logged just about everything and checked state for anomalies but I don't see the problem. My demo code can be found here. Thanks.

Upvotes: 0

Views: 811

Answers (1)

Abdallatif Sulaiman
Abdallatif Sulaiman

Reputation: 365

just give the Droppable component a fixed height or even a minHeight.

try this https://codesandbox.io/s/1vp4835x7l

Upvotes: 2

Related Questions