Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

253
Views
Dnd-kit: active item loses order when dragged on Droppable

I'm facing a problem using @dnd-kit. The soring part works well (for example when I start dragging 1st element it obvioeulsy does sort), but when I reach a droppable element (green Thrash), the sorting breaks and the 1st element goes back.

You can see live demo here: link

Is there any way to fix this?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

The problem was in handlers. When a dragged item reaches outside of the original drop area (a list), there is no more over-item under it. This is when the dragOver handler used to crash, since it relies on over.id internally

Solution: https://codesandbox.io/s/dndkit-grid-with-drag-handle-example-forked-w4j3sn

  1. Added checks for null and for id match
  2. Moved deletion logic to dragEnd handler
  3. Added state for dragged item reaching trash, so that list item can reflect it (becomes hidden)
  4. List item is hidden when dragged + new prop is true
  5. Moved Trash component out of original one, not critical tho
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!