You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This is the Vue injection key under which `DnDProvider` stores its internal context. It is intended for **advanced or non-standard use cases** — for example:
41
+
42
+
- Bridging a separately mounted Vue app (e.g. a shadow root) into the same DnD context
43
+
- Building custom integrations that need direct access to the internal provider
44
+
- Exploring or debugging what the library holds internally
45
+
46
+
For everything standard — reading drag state, pointer position, preview, entities — use `useDnDProvider`. It returns a stable, typed public API and is all you need in 99% of cases.
47
+
48
+
**`injectionKey` gives you the raw internal provider.** Its shape is not part of the public API contract and may change between minor versions.
### Bug fix — drag did not start inside a Shadow DOM
74
+
### Bug fix — full Shadow DOM support
53
75
54
-
**Two separate bugs were fixed. Together they make full Shadow DOM support work — including cross-boundary drag between a shadow list and a regular list.**
76
+
**Two separate bugs were fixed. Together they enable full Shadow DOM support — including cross-boundary drag between a shadow list and a regular list.**
55
77
56
78
#### Part 1 — drag never started inside a shadow root
**The old approach** wrapped the shadow app in its own `DnDProvider`. This created two completely isolated DnD contexts — drag sessions in the shadow root were invisible to the outer provider and vice versa. Sorting between the two lists was impossible.
75
97
76
-
**The fix** is to share the outer provider with the inner Vue app via `app.provide`. Since pointer events from inside the shadow root already reach `document` (where the outer provider listens), and `composedPath()[0]` resolves the real element, all that was missing was the elements being registered in the same maps.
98
+
**The fix** is to share the outer provider with the inner Vue app via `app.provide` using the newly exported `injectionKey`. Since pointer events from inside the shadow root already reach `document` (where the outer provider listens), and `composedPath()[0]` resolves the real element, all that was missing was the elements being registered in the same maps.
77
99
78
100
```ts
79
-
// Get the outer provider inside the component that mounts the shadow app
101
+
import { inject } from'vue';
102
+
import { injectionKey } from'@vue-dnd-kit/core';
103
+
104
+
// Inside a component that is a descendant of the outer DnDProvider:
// No DnDProvider wrapper — just share the outer provider directly
112
+
// No DnDProvider wrapper — share the outer provider directly
88
113
createApp({ render: () =>h(YourShadowList) })
89
114
.provide(injectionKey, outerProvider)
90
115
.mount(container);
@@ -94,3 +119,22 @@ onMounted(() => {
94
119
Result: shadow DOM elements and regular DOM elements participate in the same drag session. You can sort within each list and drag items across the boundary between them.
95
120
96
121
---
122
+
123
+
## v2.2.0
124
+
125
+
- Added grid layout example
126
+
- Various stability improvements
127
+
128
+
## v2.1.0
129
+
130
+
-`makeSelectionArea` — box-select with multi-drag support
131
+
-`makeAutoScroll` — automatic container scroll during drag
132
+
- Keyboard navigation (Enter / Space / Arrows / Escape)
133
+
134
+
## v2.0.0
135
+
136
+
- Full rewrite. Composable-first API: `makeDraggable`, `makeDroppable`, `makeConstraintArea`, `makeSelectionArea`
137
+
-`DnDProvider` as the scope boundary (multiple independent providers on one page)
138
+
-`suggestSort`, `suggestSwap`, `suggestCopy`, `suggestRemove` helpers on `event.helpers`
Copy file name to clipboardExpand all lines: docs/v2/guide/core/use-dnd-provider.md
+39Lines changed: 39 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -109,6 +109,45 @@ Reading preview position in a custom preview:
109
109
110
110
---
111
111
112
+
---
113
+
114
+
## `injectionKey` — advanced use only
115
+
116
+
`injectionKey` is the Vue injection key under which `DnDProvider` stores its context. It is exported from the public API but **should not be used in normal application code** — `useDnDProvider` covers all typical needs.
117
+
118
+
Typical use cases:
119
+
120
+
- Bridging a separately mounted Vue app (e.g. inside a shadow root) into the same DnD context
121
+
- Building custom integrations that need direct access to the internal provider
122
+
- Exploring or debugging what the library holds at runtime
123
+
124
+
Example — sharing context with a shadow root app:
125
+
126
+
```ts
127
+
import { inject, createApp, h } from'vue';
128
+
import { injectionKey } from'@vue-dnd-kit/core';
129
+
130
+
// Inside a component that is a descendant of DnDProvider:
// Share the outer provider with the inner app — no DnDProvider wrapper needed
139
+
createApp({ render: () =>h(YourComponent) })
140
+
.provide(injectionKey, outerProvider)
141
+
.mount(container);
142
+
});
143
+
```
144
+
145
+
Elements inside the shadow root will register into the same `draggableMap` / `droppableMap` as the outer app and participate in the same drag sessions.
146
+
147
+
> **Do not** use `injectionKey` + `inject` as a replacement for `useDnDProvider`. The value behind the key is an internal type — its shape is not part of the public API contract and may change between minor versions.
148
+
149
+
---
150
+
112
151
## See also
113
152
114
153
-[DnDProvider](/v2/guide/core/dnd-provider) — setup and preview slot.
0 commit comments