I’m implementing a drag-and-drop feature in a project management board using dnd-kit. The functionality works well when tasks are dragged between containers that already have tasks. However, I’m encountering an issue when trying to drag a task into an empty container.
Currently, the drag-and-drop functionality does not seem to add the task to an empty container. Here’s my current onDragEndHandle function with helper comments:
function onDragEndHandle(event: any) {
const { active, over } = event;
// Return if no change in position
if (!over || active.id === over.id) return;
const activeTask = tasks.find((i) => i.id === active.id);
const overTask = tasks.find((i) => i.id === over.id);
setTasks((tasks) => {
// If the task is dragged to a different container
if (
activeTask &&
overTask &&
activeTask.category_task_id !== overTask.category_task_id
) {
// Update the category_task_id for the task to reflect the new container
activeTask.category_task_id = overTask.category_task_id;
}
// Find positions of active and over tasks
const oldPos = tasks.findIndex((i) => i.id === active.id);
const newPos = tasks.findIndex((i) => i.id === over.id);
// Reorder tasks based on the new positions
return arrayMove(tasks, oldPos, newPos);
});
}