I am trying to create a multiple containers drag and drop function in a second layer modal. The result is quite weird. I can move the items to other containers, but I have to double click the same item to make it move. I don't know where I'm going wrong and how to solve it.
This handleDragOver function is the part of my code that might cause the problem.
function handleDragOver(event) {
console.log("start drag over");
const { active, over } = event;
const { id } = active;
const { id: overId } = over;
console.log("active", id);
console.log("over", overId);
// Find the containers
var activeContainer;
var overContainer;
findContainer(id)
.then(async (data) => {
activeContainer = await data;
await findContainer(overId).then(async (d) => {
overContainer = await d;
});
})
.then(() => {
console.log("activeContainer", activeContainer);
console.log("overContainer", overContainer);
if (
!activeContainer ||
!overContainer ||
activeContainer === overContainer
) {
return;
}
setGroupItems((prev) => {
const activeItems = prev[activeContainer];
const overItems = prev[overContainer];
const activeIndex = activeItems.findIndex((i) => i.id === id);
const overIndex = overItems.findIndex((i) => i.id === overId);
console.log("aIndex", activeIndex);
console.log("oIndex", overIndex);
let newIndex;
newIndex = overIndex >= 0 ? overIndex + 1 : overItems.length + 1;
return {
...prev,
[activeContainer]: [
...prev[activeContainer].filter((item) => item.id !== active.id)
],
[overContainer]: [
...prev[overContainer].slice(0, newIndex),
groupItems[activeContainer][activeIndex],
...prev[overContainer].slice(newIndex, prev[overContainer].length)
]
};
});
});
}
But I am not really sure so I put my sample project in the CodeSandBox down below.
This is my code in the CodeSandbox Link
Anyone gives me a direction I would be very appreciated.