i have 10 accordions with mapping over them. Each accordion have 10 items inside of it. items can be only moved inside of own accordion. my issue is my current code logic works fine with first accordion, but when i open second or another accordion and try to drag and drop its item inside his own accordion then for dropping item dont move so i can drop. Maybe my onDragEnd logic is not for multiple lists.i searched alot on google but i am not getting any soltution for multiple dynamic lists. here is codesandbox link https://codesandbox.io/s/wispy-tree-rkkgww?file=/Demo.js:0-15199 i am pasting the code as well.
import * as React from "react";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import Typography from "@mui/material/Typography";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { Paper, Stack } from "@mui/material";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
const accordionData = [
{
id: 1,
title: "Accordion 1",
content: [
{ id: 101, text: "Item 1" },
{ id: 102, text: "Item 2" },
{ id: 103, text: "Item 3" },
{ id: 104, text: "Item 4" },
{ id: 105, text: "Item 5" },
{ id: 106, text: "Item 6" },
{ id: 107, text: "Item 7" },
{ id: 108, text: "Item 8" },
{ id: 109, text: "Item 9" },
{ id: 110, text: "Item 10" }
]
},
{
id: 2,
title: "Accordion 2",
content: [
{ id: 111, text: "Item 1" },
{ id: 112, text: "Item 2" },
{ id: 113, text: "Item 3" },
{ id: 114, text: "Item 4" },
{ id: 115, text: "Item 5" },
{ id: 116, text: "Item 6" },
{ id: 117, text: "Item 7" },
{ id: 118, text: "Item 8" },
{ id: 119, text: "Item 9" },
{ id: 120, text: "Item 10" }
]
},
{
id: 3,
title: "Accordion 3",
content: [
{ id: 121, text: "Item 1" },
{ id: 122, text: "Item 2" },
{ id: 123, text: "Item 3" },
{ id: 124, text: "Item 4" },
{ id: 125, text: "Item 5" },
{ id: 126, text: "Item 6" },
{ id: 127, text: "Item 7" },
{ id: 128, text: "Item 8" },
{ id: 129, text: "Item 9" },
{ id: 130, text: "Item 10" }
]
},
{
id: 4,
title: "Accordion 4",
content: [
{ id: 131, text: "Item 1" },
{ id: 132, text: "Item 2" },
{ id: 133, text: "Item 3" },
{ id: 134, text: "Item 4" },
{ id: 135, text: "Item 5" },
{ id: 136, text: "Item 6" },
{ id: 137, text: "Item 7" },
{ id: 138, text: "Item 8" },
{ id: 139, text: "Item 9" },
{ id: 140, text: "Item 10" }
]
},
{
id: 5,
title: "Accordion 5",
content: [
{ id: 141, text: "Item 1" },
{ id: 142, text: "Item 2" },
{ id: 143, text: "Item 3" },
{ id: 144, text: "Item 4" },
{ id: 145, text: "Item 5" },
{ id: 146, text: "Item 6" },
{ id: 147, text: "Item 7" },
{ id: 148, text: "Item 8" },
{ id: 149, text: "Item 9" },
{ id: 150, text: "Item 10" }
]
},
{
id: 6,
title: "Accordion 6",
content: [
{ id: 151, text: "Item 1" },
{ id: 152, text: "Item 2" },
{ id: 153, text: "Item 3" },
{ id: 154, text: "Item 4" },
{ id: 155, text: "Item 5" },
{ id: 156, text: "Item 6" },
{ id: 157, text: "Item 7" },
{ id: 158, text: "Item 8" },
{ id: 159, text: "Item 9" },
{ id: 160, text: "Item 10" }
]
},
{
id: 7,
title: "Accordion 7",
content: [
{ id: 161, text: "Item 1" },
{ id: 162, text: "Item 2" },
{ id: 163, text: "Item 3" },
{ id: 164, text: "Item 4" },
{ id: 165, text: "Item 5" },
{ id: 166, text: "Item 6" },
{ id: 167, text: "Item 7" },
{ id: 168, text: "Item 8" },
{ id: 169, text: "Item 9" },
{ id: 170, text: "Item 10" }
]
},
{
id: 8,
title: "Accordion 8",
content: [
{ id: 171, text: "Item 1" },
{ id: 172, text: "Item 2" },
{ id: 173, text: "Item 3" },
{ id: 174, text: "Item 4" },
{ id: 175, text: "Item 5" },
{ id: 176, text: "Item 6" },
{ id: 177, text: "Item 7" },
{ id: 178, text: "Item 8" },
{ id: 179, text: "Item 9" },
{ id: 180, text: "Item 10" }
]
},
{
id: 9,
title: "Accordion 9",
content: [
{ id: 181, text: "Item 1" },
{ id: 182, text: "Item 2" },
{ id: 183, text: "Item 3" },
{ id: 184, text: "Item 4" },
{ id: 185, text: "Item 5" },
{ id: 186, text: "Item 6" },
{ id: 187, text: "Item 7" },
{ id: 188, text: "Item 8" },
{ id: 189, text: "Item 9" },
{ id: 190, text: "Item 10" }
]
},
{
id: 10,
title: "Accordion 10",
content: [
{ id: 191, text: "Item 1" },
{ id: 192, text: "Item 2" },
{ id: 193, text: "Item 3" },
{ id: 194, text: "Item 4" },
{ id: 195, text: "Item 5" },
{ id: 196, text: "Item 6" },
{ id: 197, text: "Item 7" },
{ id: 198, text: "Item 8" },
{ id: 199, text: "Item 9" },
{ id: 200, text: "Item 10" }
]
}
];
const BasicButtons = () => {
const [arrayData, setArrayData] = React.useState(accordionData);
const moveItem = (result) => {
if (!result. Destination) return;
const sourceAccordionId = parseInt(result.source.droppableId);
const destinationAccordionId = parseInt(result.destination.droppableId);
const updatedData = [...accordionData];
const sourceAccordionIndex = updatedData.findIndex(
(accordion) => accordion.id === sourceAccordionId
);
const destinationAccordionIndex = updatedData.findIndex(
(accordion) => accordion.id === destinationAccordionId
);
const [movedItem] = updatedData[sourceAccordionIndex].content.splice(
result.source.index,
1
);
updatedData[destinationAccordionIndex].content.splice(
result.destination.index,
0,
movedItem
);
setArrayData(updatedData);
};
return (
<DragDropContext onDragEnd={moveItem}>
<Stack direction="column" spacing={2}>
{arrayData.map((data) => (
<Droppable droppableId={data.id.toString()}>
{(provided) => (
<Accordion key={data.id}>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography>{data.title}</Typography>
</AccordionSummary>
<AccordionDetails
ref={provided.innerRef}
{...provided.droppableProps}
>
<Stack direction="column" spacing={3}>
{data.content.map((contentItem, index) => (
<>
<Draggable
key={contentItem.id}
index={index}
draggableId={contentItem.id.toString()}
>
{(provided) => (
<Paper
key={contentItem.id}
index={index}
draggableId={contentItem.id.toString()}
sx={{ padding: "10px" }}
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
{contentItem.text}
</Paper>
)}
</Draggable>
</>
))}
{provided.placeholder}
</Stack>
</AccordionDetails>
</Accordion>
)}
</Droppable>
))}
</Stack>
</DragDropContext>
);
};
export default BasicButtons;
