最初，该元素可从一列拖动到另一列，但是在拖动2-3个项目后，位于特定索引上的项目将停止Draggins，例如我将一个项目从第1列索引0拖动到第2列索引0，但再尝试1-2次后，索引0的项目停止移动，而其他索引处的项目移动时则停止拖动。我不明白其背后的原因，这是所附的代码。
import React, { Component } from "react";
import { Card, Badge } from "react-bootstrap";
import "./projects.scss";
import projectInfo1 from "../../jsonData/projects1";
import { IconContext } from "react-icons";
import { FiPlus } from "react-icons/fi";
import { Droppable, DragDropContext, Draggable } from "react-beautiful-dnd";
class Projects extends Component {
state = projectInfo1;
constructor(props) {
super(props);
this.onDragEnd = this.onDragEnd.bind(this);
}
onDragEnd = (result) => {
const { destination, source, draggableId } = result;
if (!destination) {
return;
}
if (
destination.droppableId === source.droppableId &&
destination.index === source.index
) {
return;
}
const start = this.state.projects[source.droppableId];
const finish = this.state.projects[destination.droppableId];
if (start === finish) {
const newTopicIds = Array.from(start.topicIds);
newTopicIds.splice(source.index, 1);
newTopicIds.splice(destination.index, 0, draggableId);
const newProject = {
...start,
topicIds: newTopicIds,
};
const newState = {
...this.state,
projects: {
...this.state.projects,
[newProject.id]: newProject
}
}
this.setState(newState);
return
}
//moving from one list to another
const startTopicIds = Array.from(start.topicIds);
startTopicIds.splice(source.index, 1);
const newStart = {
...start,
topicIds: startTopicIds,
};
const finishTopicIds = Array.from(finish.topicIds);
finishTopicIds.splice(destination.index, 0, draggableId);
const newFinish = {
...finish,
topicIds: finishTopicIds,
};
const newState = {
...this.state,
projects: {
...this.state.projects,
[newStart.id]: newStart,
[newFinish.id]: newFinish,
},
};
this.setState(newState);
};
render() {
return (
<DragDropContext onDragEnd={this.onDragEnd}>
<div className="projectCards">
{this.state.projectsOrder.map((projectID) => {
const project = this.state.projects[projectID];
return (
<Card
className="projectCard"
bg="light"
style={{ width: "21rem" }}
key={project.id}
>
<Card.Header color="#366FF0" className="projectcardheader">
{project.projectName}
</Card.Header>
<Droppable droppableId={project.id}>
{(provided) => (
<div
className="cardcontent"
ref={provided.innerRef}
{...provided.droppableProps}
>
{project.topicIds.map((topicid, index) => {
const topic = this.state.topics[topicid];
return (
<Draggable draggableId={topic.id} index={index}>
{(provided) => (
<Card
key={topic.id}
className="topicscard"
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
>
<Card.Title className="topicsheading">
{topic.topicName}
</Card.Title>
<Card.Text className="topicdescription">
{topic.topicDescription}
</Card.Text>
<div>
{topic.topicTags ? (
topic.topicTags.map((k) => {
return (
<Badge
variant="primary"
className="tags"
>
{k}
</Badge>
);
})
) : (
<Badge variant="primary"></Badge>
)}
</div>
</Card>
)}
</Draggable>
);
})}
{provided.placeholder}
</div>
)}
</Droppable>
<div className="addnewcard">
<IconContext.Provider
value={{
style: { verticalAlign: "middle" },
className: "reacticon",
}}
>
<FiPlus />
</IconContext.Provider>{" "}
Add another discussion
</div>
</Card>
);
})}
</div>
</DragDropContext>
);
}
}
export default Projects;
InitialData：
const projectsInfo1 = {
topics: {
"topic-1": {
id: "topic-1",
topicName: "Adding a feature: GSoC 1",
topicDescription:
"Some quick example text to build on the card title and make up the bulk of the card's content.",
topicTags: ["ReactJs", "NodeJS"],
},
"topic-2": {
id: "topic-2",
topicName: "Adding a feature: GSoC 2",
topicDescription:
"Some quick example text to build on the card title and make up the bulk of the card's content.",
topicTags: ["ReactJs", "NodeJS"],
},
"topic-3": {
id: "topic-3",
topicName: "Adding a feature: GSoC 3",
topicDescription:
"Some quick example text to build on the card title and make up the bulk of the card's content.",
topicTags: ["ReactJs", "NodeJS"],
},
"topic-4": {
id: "topic-4",
topicName: "Adding a feature: GSoC 4",
topicDescription:
"Some quick example text to build on the card title and make up the bulk of the card's content.",
topicTags: ["ReactJs", "NodeJS"],
},
"topic-5": {
id: "topic-5",
topicName: "Adding a feature: GSoC 5",
topicDescription:
"Some quick example text to build on the card title and make up the bulk of the card's content.",
topicTags: ["ReactJs", "NodeJS"],
},
"topic-6": {
id: "topic-6",
topicName: "Adding a feature: GSoC 6",
topicDescription:
"Some quick example text to build on the card title and make up the bulk of the card's content.",
topicTags: ["ReactJs", "NodeJS"],
},
"topic-7": {
id: "topic-7",
topicName: "Adding a feature: GSoC 7",
topicDescription:
"Some quick example text to build on the card title and make up the bulk of the card's content.",
topicTags: ["ReactJs", "NodeJS"],
},
"topic-8": {
id: "topic-8",
topicName: "Adding a feature: GSoC 8",
topicDescription:
"Some quick example text to build on the card title and make up the bulk of the card's content.",
topicTags: ["ReactJs", "NodeJS"],
},
"topic-9": {
id: "topic-9",
topicName: "Adding a feature: GSoC 9",
topicDescription:
"Some quick example text to build on the card title and make up the bulk of the card's content.",
topicTags: ["ReactJs", "NodeJS"],
},
"topic-10": {
id: "topic-10",
topicName: "Adding a feature: GSoC 10",
topicDescription:
"Some quick example text to build on the card title and make up the bulk of the card's content.",
topicTags: ["ReactJs", "NodeJS"],
},
},
projectsOrder: [
"Project-2",
"Project-1",
"Project-5",
"Project-4",
"Project-3",
],
projects: {
"Project-1": {
projectName: "Project 1",
id: "Project-1",
topicIds: ["topic-1", "topic-2"],
},
"Project-2": {
projectName: "Project 2",
id: "Project-2",
topicIds: ["topic-3", "topic-4"],
},
"Project-3": {
projectName: "Project 3",
id: "Project-3",
topicIds: ["topic-5", "topic-6"],
},
"Project-4": {
projectName: "Project 4",
topicIds: ["topic-7", "topic-8"],
id: "Project-4",
},
"Project-5": {
projectName: "Project 5",
id: "Project-5",
topicIds: ["topic-9", "topic-10"],
},
},
};
export default projectsInfo1;
答案 0 :(得分：2)
不知道您是否仍然遇到此问题，但我遇到了同样的问题，因此为我解决了此问题。
您的Draggable需要具有唯一的密钥。
即
发件人：
...
return (
<Draggable draggableId={topic.id} index={index}>
{(provided) => (
<Card
...
收件人：
...
return (
<Draggable draggableId={topic.id} index={index} key={topic.id}>
{(provided) => (
<Card
...
或多或少。