Element remain in position when drag end

[RedLizardDesign]

I'm stuck here, the Docs aren't6 that clear for me, but can anyone just please guide me on how, when I drag an element and I end the drag the element stays in that position please?

THANKS!

[KalenAnson]

@RedLizardDesign Do you have an event handler for the onDragEnd() event (ref https://docs.dndkit.com/api-documentation/context-provider/use-dnd-monitor)?

The key thing to grasp when using DnD Kit is that handling the drag events is totally up to you:

const handleDragEnd = (event) => {
    const {active, over} = event;
        // Logic here to figure out what was dragged (active)
        // and where the drag event ended (over)
        // Perhaps you will want to reorder your array of draggable items,
        // delete an item from the array, add an item to this array, or
        // ignore the event altogether and do noting. <- This is the
        // default action if you don't write the logic above and what you are
        // most likely seeing in your problem.
}
useDndMonitor({
    onDragStart(event) {},
    onDragMove(event) {},
    onDragOver(event) {},
    onDragEnd(event) { handleDragEnd(event); },
    onDragCancel(event) {},
});

If you don't explicitly handle the drag events, DnD Kit does nothing for you. This is pretty key to understand.

Check out the example here as well where the handleDragEnd callback is illustrated https://docs.dndkit.com/presets/sortable#connecting-all-the-pieces .