Hey! I implemented the dnd feature on my app, the interface is like this:
The section on the left contains two elements in a column both wrapped with Droppable
and the section on the right contains the grid of elements (all wrapped with Draggable)
The issue is sometimes for the last row of the grid, when I drag the element and drop it over the Droppable element, the over is returned null. The code for handleDragStart, handleDragEnd, Draggable and Droppable are below for reference.
const handleDragStart = (event) => {
setActiveId(event.active.id);
let index = duplicates.findIndex((i) => i.name == event.active.id);
if (index >= 0) {
updateSelected(index);
}
};
// The over is null sometimes
const handleDragEnd = ({ over }) => {
setActiveId(null);
if (over) {
if (over.id === "list-drop") {
addToList();
} else if (over.id === "image-drop") {
updateCurrent();
}
}
};
Hey! I implemented the dnd feature on my app, the interface is like this:
The section on the left contains two elements in a column both wrapped with
Droppable
and the section on the right contains the grid of elements (all wrapped withDraggable
)The issue is sometimes for the last row of the grid, when I drag the element and drop it over the Droppable element, the
over
is returnednull
. The code forhandleDragStart
,handleDragEnd
,Draggable
andDroppable
are below for reference.The code for the right section