@dnd-kit/react source and target in sortable list always the same in onDragEnd handler
- Dominant language
- TypeScript
- Stars
- 17.6k
- Forks
- 924
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 2
Description
When composing a multiple sortable list and handling the `onDragEnd` event, both `operation.source` and `operation.target` are always set to the currently dragged item when re-arranging the order of a parent list (i.e.: moving the position of a kanban column).
When dragging the column, the `target` is only ever the correct one when you are dragging directly over the top of the target element itself.
When `@dnd-kit/react` automatically re-positions other columns in the sortable list to "preview" where the dragged column _will_ be dropped, it causes the `target` to be subsequently set to the currently dragged column when there's no column "beneath" it besides the "ghost column".
This makes it near enough impossible to trigger a change such as updating a column's position in an external DB:
```tsx
const handleDragEnd = (cancelled: boolean, operation: KanbanDragEvent) => {
if (!cancelled && operation.source && operation.target) {
const { source, target } = operation
switch (source.type) {
case 'column':
props.onGroupReorder(source.data, target.data)
break
case 'item':
props.onItemMove(source.data, target.data)
break
}
}
}
```
### Reproduction
I've created a reproduction of this issue by forking a minimal version of the multiple sortable lists example on CodeSandbox.
[View the reproduction on CodeSandbox](https://codesandbox.io/p/sandbox/inspiring-napier-sp4kjs?file=%2FApp.js)
Contributor guide
Research direction
Start with the multiple sortable lists example and the linked CodeSandbox reproduction, then trace the @dnd-kit/react onDragEnd operation values while a parent column is preview-repositioned. Compare operation.source and operation.target when dragging directly over a column versus over the previewed position; done means the handler reports the intended drop target consistently.
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
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100