search

Georgegriff / react-dnd-kit-tailwind-shadcn-ui

Drag and drop Accessible kanban board implementing using React, @dnd-kit, tailwind and shadcn/ui
https://georgegriff.github.io/react-dnd-kit-tailwind-shadcn-ui/
MIT License
384 stars 27 forks source link

Sorting Issue #5

Open mnofrizal opened 4 months ago

mnofrizal commented 4 months ago

I am putting the task on the very top of the list, so the overlay shows that it is going to be the very first task in this column, once I dropped the tasks, it goes at the very bottom of the column. ezgif-6-fe182854cd

Georgegriff commented 3 months ago

See if you can fix it and share the solution, this is just a starter repo

ahmedazizkhelifi commented 1 month ago

TLDR; @mnofrizal The issue is in this line: https://github.com/Georgegriff/react-dnd-kit-tailwind-shadcn-ui/blob/3e1dbb0b872125191d5f9c3686060f64d304b99e/src/components/KanbanBoard.tsx#L349

If the overIndex is 0, so the to will be negative (-1) and arrayMove function will move the task in array.length + to position which is the last position.

You can find the arrayMove definition here : https://github.com/clauderic/dnd-kit/blob/master/packages/sortable/src/utilities/arrayMove.ts

The fix is to use the max of 0 and overIndex - 1

return arrayMove(tasks, activeIndex, Math.max(0, overIndex - 1));