3

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?

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.

4
  • 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: codesandbox.io/s/…
    – Jorge Kunrath
    Commented Apr 8, 2021 at 3: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
    Commented Apr 8, 2021 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
    Commented Apr 8, 2021 at 15:10
  • hahaha sure thing. You can check the sandbox WITHOUT usind the component "dragoverlay" and it works decently though not perfect
    – BlowFish
    Commented Apr 8, 2021 at 17:32

1 Answer 1

Reset to default
7

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

0

Not the answer you're looking for? Browse other questions tagged or ask your own question.