发生的事情是,当我在一列中有多个项目并尝试拖动一个项目时,仅显示一个项目,根据发现的经验here,我应该可以在同一列中移动项目但不能。在React开发工具中,状态和r-b-dnd id看起来不错,但是我知道什么呢?我只是个菜鸟。到目前为止,这是我的onDragEnd
中的所有内容。
onDragEnd = result => {
const { destination, source, draggableId } = result;
if (!destination) return;
if (
destination.droppableId === source.droppableId &&
destination.index === source.index
) {
return;
}
let start = this.state.list[source.droppableId];
let finish = this.state.list[destination.droppableId];
if (start === finish) {
let updatedList = this.state.list.map(obj => {
if (obj.id === source.droppableId) {
obj.cards.splice(source.index, 1);
obj.cards.splice(destination.index, 0, draggableId);
}
return obj;
});
this.setState({ list: updatedList });
}
可以在here处找到我的应用。谢谢。
答案 0 :(得分:1)
在您的代码中,onDragEnd
中有此代码,这就是为什么您不能重新排列同一列表中的项目的原因。当您在同一列表中移动项目时,源和目标Droppable ID将相同。
if (destination.droppableId === source.droppableId && destination.index === source.index) {
console.log("they're equal");
return;
}
const Card = props => {
return (
// This is NOT unique. This should be dynamic, we should use idx probably.
<Draggable draggableId={props.col + "-" + props.color} index={props.idx}>
{provided => (
更正这两点后,我无法移动项目:https://codesandbox.io/s/r5z28w85yo。希望这会有所帮助。