I have a simple react project stackblitz with react-beautiful-dnd.
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppable">
{(provided) => (
<div ref={provided.innerRef} {...provided.droppableProps}>
{categories.map((category, index) => (
<Draggable
key={category.id}
draggableId={category.id && category.id.toString()}
index={index}
>
{(provided) => (
<div ref={provided.innerRef} {...provided.draggableProps}>
<Category
key={category.id}
provided={provided}
category={category}
index={index}
/>
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
List:
const categories = [
{ id: 1, name: 'Category 1' },
{ id: 2, name: 'Category 2' },
];
const items = [
{ id: 1, name: 'Item 1', category: 1 },
...
{ id: 3, name: 'Item 3', category: 2 },
...
];
How can I implement dragging items from one category to another with changing the value of item.category ?
CodePudding user response:
Not the most simple thing to do. I have made a minimal working exmple, base on yours.
https://stackblitz.com/edit/react-1j37eg?file=src/App.js
Essentially 2 things needed to be changed 1: not using state 2: only using one Droppable
I added some links to info on react state as I am unsure what you know about it.
As an aside I think that react-beutiful-dnd is no longer being activly maintained and I would reccommend https://dndkit.com/ which has excellent documentation.
Hope this helps you!