I have used drag and drop using react-beautiful-dnd but the drag is not working.
This is my drag function
const handleDragEnd = (result) => {
if (!result.destination) return; // Return if the item was dropped outside of a droppable area
const { source, destination } = result;
// Reorder projects within the same column
if (source.droppableId === destination.droppableId) {
setProjects((prevProjects) => {
const reorderedProjects = Array.from(prevProjects);
const [movedProject] = reorderedProjects.splice(source.index, 1);
reorderedProjects.splice(destination.index, 0, movedProject);
storeProjectsAndIssues(reorderedProjects); // Update the project order in localStorage
return reorderedProjects;
});
}
};
This is my jsx code
<DragDropContext onDragEnd={handleDragEnd}>
<div className="row">
<h3 className="txt-lft mb-4">{projectName}</h3>
<Droppable
droppableId="kanban-board"
direction="horizontal"
type="COLUMN"
>
{(provided) => (
<div className="col-4">
<div className="txt-lft">
{toDoProjects.map((project, index) => (
<div key={index}>
<h5>
{project?.status} : {project?.issues.length}
</h5>
</div>
))}
</div>
<div
className="kanban-board"
{...provided.droppableProps}
ref={provided.innerRef}
>
{toDoProjects.map((project, index) => (
<div key={project?.id} className="kanban-column card p-3">
<h2>
<button
className="btn btn-danger"
onClick={() => handleDeleteProject(project?.id)}
>
Delete board
</button>
</h2>
{project?.issues.map((issue, issueIndex) => (
<Draggable
key={issue.id}
draggableId={issue.id}
index={issueIndex}
>
{(provided, snapshot) => (
<div
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
className="kanban-card"
style={{
...provided.draggableProps.style,
boxShadow: snapshot.isDragging
? "0 4px 8px rgba(0, 0, 0, 0.1)"
: "none",
transform: snapshot.isDragging
? "scale(1.05)"
: "none",
}}
>
{editingIssueId === issue.id ? (
// Render input fields in edit mode
<div>
<input
type="text"
value={editedIssueTitle}
onChange={(e) =>
handleEditFieldChange(
issue.id,
"title",
e.target.value
)
}
/>
<input
type="text"
value={editedIssueAssignee}
onChange={(e) =>
handleEditFieldChange(
issue.id,
"assignee",
e.target.value
)
}
/>
<input
type="text"
value={editedIssuePriority}
onChange={(e) =>
handleEditFieldChange(
issue.id,
"priority",
e.target.value
)
}
/>
{/* Add more input fields for other issue details if needed */}
<button
className="btn btn-primary"
onClick={() => handleSaveIssue(issue.id)}
>
Save
</button>
</div>
) : (
// Render issue details in view mode
<div>
<h4>Issue: {issue?.title}</h4>
<h5>Assignee: {issue?.assignee}</h5>
<h5>Priority: {issue?.priority}</h5>
{/* Add more issue details if needed */}
<button
className="btn btn-outline-danger mr-2"
onClick={() =>
handleDeleteCard(project.id, issue.id)
}
>
Delete Card
</button>
<button
className="btn btn-secondary m-2"
onClick={() =>
handleEditIssue(issue.id, project.id)
}
>
Edit Issue
</button>
</div>
)}
</div>
)}
</Draggable>
))}
{/* Rest of the project column content */}
<button
className="btn btn-success my-2"
onClick={() =>
handleCreateCard(
project?.id,
customTitle,
customAssignee,
customDescription,
customPriority
)
}
>
Create
</button>
</div>
))}
{provided.placeholder}
</div>
</div>
)}
</Droppable>
<Droppable
className="col-3"
droppableId="kanban-board"
direction="horizontal"
type="COLUMN"
>
{(provided) => (
<div className="col-4">
<div className="txt-lft">
{inProgressProjects.map((project, index) => (
<h5>
{project?.status} : {project?.issues.length}
</h5>
))}
</div>
<div
className="kanban-board"
{...provided.droppableProps}
ref={provided.innerRef}
>
{inProgressProjects.map((project, index) => (
<div key={project?.id} className="kanban-column card p-3">
<h2>
<button
className="btn btn-danger"
onClick={() => handleDeleteProject(project?.id)}
>
Delete board
</button>
</h2>
{project?.issues.map((issue, issueIndex) => (
<Draggable
key={issue.id}
draggableId={issue.id}
index={issueIndex}
>
{(provided, snapshot) => (
<div
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
className="kanban-card"
style={{
...provided.draggableProps.style,
boxShadow: snapshot.isDragging
? "0 4px 8px rgba(0, 0, 0, 0.1)"
: "none",
transform: snapshot.isDragging
? "scale(1.05)"
: "none",
}}
>
{editingIssueId === issue.id ? (
// Render input fields in edit mode
<div>
<input
type="text"
value={editedIssueTitle}
onChange={(e) =>
handleEditFieldChange(
issue.id,
"title",
e.target.value
)
}
/>
<input
type="text"
value={editedIssueAssignee}
onChange={(e) =>
handleEditFieldChange(
issue.id,
"assignee",
e.target.value
)
}
/>
<input
type="text"
value={editedIssuePriority}
onChange={(e) =>
handleEditFieldChange(
issue.id,
"priority",
e.target.value
)
}
/>
{/* Add more input fields for other issue details if needed */}
<button
className="btn btn-primary"
onClick={() => handleSaveIssue(issue.id)}
>
Save
</button>
</div>
) : (
// Render issue details in view mode
<div>
<h4>Issue: {issue?.title}</h4>
<h5>Assignee: {issue?.assignee}</h5>
<h5>Priority: {issue?.priority}</h5>
{/* Add more issue details if needed */}
<button
className="btn btn-outline-danger mr-2"
onClick={() =>
handleDeleteCard(project.id, issue.id)
}
>
Delete Card
</button>
<button
className="btn btn-secondary m-2"
onClick={() =>
handleEditIssue(issue.id, project.id)
}
>
Edit Issue
</button>
</div>
)}
</div>
)}
</Draggable>
))}
{/* Rest of the project column content */}
<button
className="btn btn-success my-2"
onClick={() =>
handleCreateCard(
project?.id,
customTitle,
customAssignee,
customDescription,
customPriority
)
}
>
Create
</button>
</div>
))}
{provided.placeholder}
</div>
</div>
)}
</Droppable>
<Droppable
droppableId="col kanban-board"
direction="horizontal"
type="COLUMN"
>
{(provided) => (
<div className="col-4">
<div className="txt-lft">
{completedProjects.map((project, index) => (
<h5>
{project?.status} : {project?.issues.length}
</h5>
))}
</div>
<div
className="kanban-board"
{...provided.droppableProps}
ref={provided.innerRef}
>
{completedProjects.map((project, index) => (
<div key={project?.id} className="kanban-column card p-3">
<h2>
<button
className="btn btn-danger"
onClick={() => handleDeleteProject(project?.id)}
>
Delete board
</button>
</h2>
{project?.issues.map((issue, issueIndex) => (
<Draggable
key={issue.id}
draggableId={issue.id}
index={issueIndex}
>
{(provided, snapshot) => (
<div
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
className="kanban-card"
style={{
...provided.draggableProps.style,
boxShadow: snapshot.isDragging
? "0 4px 8px rgba(0, 0, 0, 0.1)"
: "none",
transform: snapshot.isDragging
? "scale(1.05)"
: "none",
}}
>
{editingIssueId === issue.id ? (
// Render input fields in edit mode
<div>
<input
type="text"
value={editedIssueTitle}
onChange={(e) =>
handleEditFieldChange(
issue.id,
"title",
e.target.value
)
}
/>
<input
type="text"
value={editedIssueAssignee}
onChange={(e) =>
handleEditFieldChange(
issue.id,
"assignee",
e.target.value
)
}
/>
<input
type="text"
value={editedIssuePriority}
onChange={(e) =>
handleEditFieldChange(
issue.id,
"priority",
e.target.value
)
}
/>
{/* Add more input fields for other issue details if needed */}
<button
className="btn btn-primary"
onClick={() => handleSaveIssue(issue.id)}
>
Save
</button>
</div>
) : (
// Render issue details in view mode
<div>
<h4>Issue: {issue?.title}</h4>
<h5>Assignee: {issue?.assignee}</h5>
<h5>Priority: {issue?.priority}</h5>
{/* Add more issue details if needed */}
<button
className="btn btn-outline-danger mr-2"
onClick={() =>
handleDeleteCard(project.id, issue.id)
}
>
Delete Card
</button>
<button
className="btn btn-secondary m-2"
onClick={() =>
handleEditIssue(issue.id, project.id)
}
>
Edit Issue
</button>
</div>
)}
</div>
)}
</Draggable>
))}
{/* Rest of the project column content */}
<button
className="btn btn-success my-2"
onClick={() =>
handleCreateCard(
project?.id,
customTitle,
customAssignee,
customDescription,
customPriority
)
}
>
Create
</button>
</div>
))}
{provided.placeholder}
</div>
</div>
)}
</Droppable>
</div>
</DragDropContext>
when i am performing drag i am getting console message "Unable to find draggable with id: 5affbf"
I will also provide my data structure
const projectsData = [
{
id: 'project1',
name: 'Demo App',
status: 'To Do',
issues: [
{
id: "1xmhnfb",
title: 'Issue 1',
assignee: 'John Doe',
description: 'This is the first issue',
priority: 'High',
comments: [],
},
{
id: "2yrhgn",
title: 'To do 1',
assignee: 'Doe',
description: 'This is the Second issue',
priority: 'High',
comments: [],
},
// More issues...
],
},
{
id: 'project2',
name: 'Project 2',
status: 'In Progress',
issues: [
{
id: "3jlhjj",
title: 'Issue 2',
assignee: 'Jane Smith',
description: 'This is the second issue',
priority: 'Medium',
comments: [],
},
{
id: "4rgfbdn",
title: 'testIssue 2',
assignee: 'Smith',
description: 'This is the test issue',
priority: 'Medium',
comments: [],
},
// More issues...
],
},
{
id: 'project3',
name: 'Project 3',
status: 'Completed',
issues: [
{
id: "5affbf",
title: 'Issue 3',
assignee: 'Mc Smith',
description: 'This is the third issue',
priority: 'Medium',
comments: [],
},
{
id: "6lghmfg",
title: 'Issue 3',
assignee: 'Mc Smith',
description: 'This is the third issue',
priority: 'Medium',
comments: [],
},
// More issues...
],
},
// More projects...
];
Any guess what is causing the drag functionality not working properly ?
