Cross-window drag and drop
- Dominant language
- TypeScript
- Stars
- 17.6k
- Forks
- 924
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 2
Description
[#394](https://github.com/clauderic/dnd-kit/issues/394) was closed in 2021 with “no plans, use the HTML5 drag and drop API”, but I’d like to ask again, because the experimental packages seem to have quietly built most of the pieces that would be needed.
My use case: I'm building a docking layout library, and using dnd-kit to handle the drag and drop there, and one feature that I want to implement is the multi-window dnd (so people can drag one panel from one window to another.
I went through the @dnd-kit/dom package to see how far away it is, and it’s kinda there already. `getDocuments()` already binds sensors across documents, it just only discovers `iframes` (I don't want to use iframes for this). `getFrameTransform()` already reconciles coordinates between documents, it just returns identity when frameElement is null, which is every popup. Collisions already work off whatever’s in the registry. For same-origin popups the app opens itself, the missing bits are registering an external document with the manager and a window-level transform fallback (window.screenX/screenY + chrome offset) for when `frameElement` is `null`.
The thing that made this look impossible in 2021 actually behaves: while the button is down, the OS keeps sending pointer events to the source window even with the cursor over the popup, and screen-1/screen-2 stay valid across monitors. Mixed-DPI setups make the transform ugly (idk if I care about it that much for now, but it's an issue to check)
Would you take a PR, or expose the seams so this can live outside core? Happy to prototype in a fork and share here if you want. If the answer is still “native DnD FTW”, also fine, I just want to know before I build the userland workaround.
Contributor guide
Research direction
Start by reading the experimental @dnd-kit/dom implementations of getDocuments(), getFrameTransform(), and the sensor/document manager behavior for iframes. Check how same-origin popup documents, pointer events, screen coordinates, and mixed-DPI windows are handled. Done means cross-window dragging works or the required extension seams are clearly exposed, with behavior covered by relevant tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100