2

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.

Werthis
  • 557
  • 3
  • 15
BlowFish
  • 326
  • 4
  • 10
  • Fish... I tried, but it seems like I can't either... I got an error tho, when draging to the first element, maybe there's a clue somewhere idk. I think I'll look at this tomorrow again, but here's ~basic nothing~ of what I did: https://codesandbox.io/s/dnd-kit-implementation-failed-animation-forked-59zs8?file=/src/List.jsx – Jorge Kunrath Apr 08 '21 at 03:30
  • Thanks for taking a look. After playing with for some while (very long while) I've discovered that the problem has something to do with the Overlay component. If I omit it or set it outside the DndContext, it works fine but without the overlay effect. – BlowFish Apr 08 '21 at 12:24
  • hmm indeed. The first item stills don't works tho :/. If happens that you solve it yourself post the answer please. I have to implement a drag n'drop thing too and I'm (lazing) studying it – Jorge Kunrath Apr 08 '21 at 15:10
  • hahaha sure thing. You can check the sandbox WITHOUT usind the component "dragoverlay" and it works decently though not perfect – BlowFish Apr 08 '21 at 17:32

1 Answers1

4

The issue is casued by the id 0. Basically the id that you pass to the useSortable hook has to a be a string (or truthy)

I changed the ids from number to string and it started working. I also forked and updated your Sandbox Code

ndr
  • 76
  • 8