Variable height elements produce jittering in sortable lists
- Dominant language
- TypeScript
- Stars
- 17.6k
- Forks
- 924
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 2
Description
A pretty much minimal repro can be seen in the live example itself:
https://main--5fc05e08a4a65d0021ae0bf2.chromatic.com/iframe.html?globals=&args=&id=react-sortable-vertical-list--variable-heights
Big elements work well when being dragged, as seen in the attached video, but small elements cause jitter when dragging over the big ones. This jitter happens consistently but also somewhat randomly, and seems to be proportional to the size of the big element relative to the small one being dragged.
https://github.com/user-attachments/assets/62289938-e994-4a7a-a60f-0ec6b370edd0
Contributor guide
Research direction
Start with the live example’s react-sortable-vertical-list--variable-heights story and reproduce the jitter while dragging a small element over a large one. Trace the sortable-list and collision or positioning behavior involved, then verify that variable-height items can be dragged across one another without visible jitter.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100