clauderic / clauderic/dnd-kit

@dnd-kit/react source and target in sortable list always the same in onDragEnd handler

Open
#1,564 22 comments 13 reactions 0 assignees View on GitHub
bug react triage:done
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.