I am using react-beautiful-dnd to try and implement a feature where an object can be dragged between multiple lists. For a while now I've been struggling to make it work properly, I'm sure there is some detail I haven't fully understood but I can't figure it out neither from the docs nor from the video tutorial.
To be fair, this code was never supposed to have this feature so there might be some refactoring I need to do and didn't notice. Here is my attempt:
<DragDropContext onDragEnd={onDragEnd}>
<Row>
<Col md="4">
<Droppable droppableId="in_progress">
{(provided, snapshot) => (
<IssueList
{...provided.droppableProps}
innerRef={provided.innerRef}
loading={loading}
issues={issues?.filter(
(issue) => issue.status === "in_progress"
)}
setReFetchData={setReFetchData}
>
{provided.placeholder}
</IssueList>
)}
</Droppable>
</Col>
<Col md="4">
<Droppable droppableId="QA">
{(provided, snapshot) => (
<IssueList
{...provided.droppableProps}
innerRef={provided.innerRef}
loading={loading}
issues={issues?.filter((issue) => issue.status === "QA")}
setReFetchData={setReFetchData}
>
{provided.placeholder}
</IssueList>
)}
</Droppable>
</Col>
</Row>
</DragDropContext>
As you can see there are multiple lists that are meant to be droppable. The idea is that the user has to be able to drag a component from one list and drop it in the other. The onDragEnd function is empty for now, but in the official tutorial it was also empty and the components could be dragged anyway.
The draggable is in another component rendered inside the lists:
issues.map((issue, index) => (
<Draggable draggableId={issue.id} index={index}>
{(provided, snapshot) => (
<div
{...provided.draggableProps}
{...provided.dragHandleProps}
innerRef={provided.innerRef}
>
<IssueCard
issue={issue}
setReFetchData={setReFetchData}
index={index}
/>
</div>
)}
</Draggable>
So, far as I can see I have everything that's needed for it to work. And yet, when I hover over the component, the mouse pointer changes to a hand but I'm unable to drag it. I searched this question and found a few problem, all of which are "fixed", at least I believe so. But it still doesn't work.
What am I missing?