Компонент не упадет в соседнем столбце response-beautiful-dnd
У меня проблемы с переносом компонента в следующую область списка моего приложения. Я могу перетаскивать, отбрасывать и сортировать в пределах родительского столбца, но не могу удалить компонент в другом месте. Вот код в моей функции 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})
}
}
Из учебника, который я использовал, я догадался, что мне просто нужно изменить состояние... Я зарегистрировал практически все и проверил состояние на наличие аномалий, но я не вижу проблемы. Мой демо-код можно найти здесь. Благодарю.
1 ответ
Решение
Просто дай Droppable
компонент фиксированный height
или даже minHeight
,
попробуйте это https://codesandbox.io/s/1vp4835x7l