'drag and drop library dnd-kit not working in my React example

I've been trying to implement a drag and drop library called dnd-kit for React.

I been working on a very basic example with help of the guide for sorting list with overlay but it doesn't work and i can't tell what am i doing wrong.

Here is the Sandbox Code

The animation is not properly working and if I interact with the first row, it freezes and stop working at all.

Any help please?

Edit: After playing with it for some time and some input from the author I got it working a bit better and found the the component DragOverlay is causing the problem which I can't solve just yet.

If DragOverlay is deleted or moved outside the DndContext, it sorts just fine but without the overlay effect.

reactjs drag-and-drop

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'drag and drop library dnd-kit not working in my React example

Sources

Related Questions