--- title: "Der Provider" description: "DnDProvider ist für jeden Drag darunter zuständig. Er findet das Ziel, startet Drags, scrollt und teilt useDnD und useDnDMonitor alles mit, was passiert." canonical_url: "https://zizigy.github.io/vue-dnd-kit/de/docs/guides/provider" --- > Index of every page on this site: [llms.txt](https://zizigy.github.io/vue-dnd-kit/llms.txt) ## Ein Provider für die App ```vue [App.vue] ``` Setze einen `DnDProvider` weit oben ein, in `App.vue` oder einem Layout, und vergiss ihn. Jedes Composable (`makeSortableList`, `makeDraggable`, `useDnD`…) sucht den nächstgelegenen Provider oberhalb der Komponente, in der es läuft. Ein Composable muss in einer Komponente laufen, die **im Provider gerendert** wird. Rufst du es in der Komponente auf, deren eigenes Template `` enthält, wird `No found above this component` geworfen: `inject` von Vue sieht nur Vorfahren. ## Wofür er zuständig ist
Teil Was der Provider tut
Eingabe Macht aus Zeiger-, Touch- und Tastatureingaben Drags ( sensors , activation ), immer nur einen gleichzeitig.
Das Ziel finden Prüft per Hit-Test, welche Drop-Ziele unter dem Drag liegen ( collision ), und teilt es ihnen mit.
Das Overlay Rendert die Box, die dem Zeiger folgt, teleportiert sie nach body und lässt sie beim Drop landen.
Die Auswahl Eine Menge ausgewählter IDs, die alle Listen und ziehbaren Elemente darunter teilen.
Auto-Scroll Scrollt Container und das Fenster, wenn sich ein Drag ihren Rändern nähert.
Die Live-Region Sagt Screenreadern an, wenn etwas aufgenommen, bewegt, abgelegt oder abgebrochen wird.
Sonst rendert er nichts: Dein Markup bleibt, wie es ist. ## Optionen im Überblick Jede Option hat einen Standardwert, der funktioniert, deshalb braucht der Provider meist keine. Der Provider liest seine Props dann, wenn er sie braucht: Die Demos unten schalten `collision`, `activation` und `autoScroll` live um.
Prop Standard Was sie festlegt
collision pointerFirst Wie das Ziel unter dem Drag gewählt wird. Unten .
activation Maus 4 px, Touch 200 ms Wann ein Drücken zum Drag wird, je nach Zeigerart. Unten .
autoScroll an Scrollen an den Rändern: { threshold, maxSpeed, acceleration } oder false . Unten .
haptics eine kurze Vibration beim Aufnehmen per Touch Vibrationen für Touch-Drags, oder false . Unten .
copyModifier 'Alt' Taste, die, während des Ziehens gehalten, aus dem Verschieben ein Kopieren macht.
modifiers [] Bewegungsregeln für jeden Drag: siehe Achsen, Grenzen und Raster .
animation / dropAnimation an Elemente, die beim Sortieren gleiten / das Landen des Overlays: siehe Animationen .
animateChanges aus Standard für Listen und Bäume: Datenänderungen animieren, die kein Drag ausgelöst hat.
keyboard Space / Enter, Escape Tasten und Schrittweite für die Tastatur; false schaltet das Ziehen per Tastatur ab. Siehe Barrierefreiheit .
sensors Zeiger + Tastatur Was Eingaben zu Drags macht: siehe Sensoren .
overlayTo 'body' Wohin das Overlay teleportiert wird.
overlayFit 'slot' Größe des Overlays: die des Slots, in dem es landen wird, oder die der Quelle. Siehe Das Overlay .
overlayTransition eine Überblendung Wie das Overlay während des Ziehens von einer Komponente zur anderen wechselt: false oder -Props. Siehe Ziele, die das Overlay ändern .
overlayClass — Klassen für den Inhalt des Overlays ( [data-dnd-overlay-content] ), das Element, das als Ganzes animiert wird: ein Anheben beim Aufnehmen, ein Ablegen beim Landen. Siehe Das Overlay: anheben, neigen, ablegen .
overlayPreviews 5 Multi-Drag: wie viele gezogene Elemente beim Aufnehmen einen Klon bekommen, oder 'all' . Siehe das Standard-Overlay .
announcements eingebaut Texte für Screenreader, oder false .
screenReaderInstructions eingebaut Der Text, auf den jedes ziehbare Element mit aria-describedby verweist.
defaultStyles true Fügt CSS mit Spezifität null für Drag-Zustände ein: siehe Styling .
Die vollständige Liste mit allen Formen steht in der [DnDProvider-API](https://zizigy.github.io/docs/api/dnd-provider). Der Provider emittiert außerdem `drag-start`, `drag-move`, `drag-over`, `drag-end`, `drag-cancel`, `drag-resume` und `drag-settle`, dieselben Events, die `useDnDMonitor` hört. ## Den Drag lesen: `useDnD()` `useDnD()` liefert den Drag als reaktiven Zustand, in jeder Komponente unter dem Provider: ```ts import { useDnD } from '@vue-dnd-kit/core'; const { status, active, over, pointer, activation, isAutoScrolling, selection, cancel } = useDnD(); ```
Feld Was es enthält
status 'idle' , 'activating' (ein Drücken wartet auf seine Aktivierung), 'dragging' , 'dropping' (kein Drag läuft, aber ein Overlay landet noch, oder ein asynchrones onBeforeDrop entscheidet), 'selecting' (ein Auswahlrahmen).
active Was gezogen wird: id , ids (jede gezogene ID, die gegriffene zuerst), items , data , type , element , rect , sensor . null im Ruhezustand.
over Das Ziel unter dem Drag: id , data , element , rect und accepted . null über nichts.
pointer Der Zeiger in Viewport-Koordinaten, nach den Modifiern.
activation.progress 0 bis 1 , während ein Drücken auf seine Aktivierung wartet: Zeichne damit einen Ring.
isAutoScrolling Auto-Scroll bewegt gerade etwas.
selection Die Auswahl des Providers: ids , has , add , delete , toggle , set , clear . Siehe Multi-Drag und Auswahl .
cancel() Bricht den laufenden Drag ab (die Elemente fliegen zurück), ein Drücken, das sich gerade auflädt, oder einen Auswahlrahmen.
```vue [DropHint.vue] ``` Sobald über einen Drop entschieden ist, lesen sich `active`, `over` und `pointer` als `null`, auch während das Overlay noch landet (`status` ist dann `'dropping'`). Eine UI, die daraus abgeleitet ist, zeigt nie den alten Drag neben den neuen Daten. Während ein asynchrones `onBeforeDrop` wartet, bleibt der Zustand so, wie er beim Loslassen war. Der nächste Drag wartet nicht auf eine Landung: Er startet sofort, und `status` ist `'dragging'`, während das letzte Overlay um ihn herum landet. Ein Drücken auf ein landendes Overlay fängt es im Flug: Der Drag geht von dort weiter, wo das Overlay gerade ist. `onDragSettle` sagt dir, wann das Overlay eines Drags angekommen ist. ## Jeden Drag mithören: `useDnDMonitor()` ```ts import { useDnDMonitor } from '@vue-dnd-kit/core'; useDnDMonitor({ onDragStart: ({ active }) => {}, onDragMove: ({ pointer, delta }) => {}, onDragOver: ({ over }) => {}, // the target changed onBeforeDrop: (e) => 'accept', // or 'reject', 'continue', some ids; may be async onDragEnd: ({ active, over, dropped, accepted, position }) => {}, onDragCancel: ({ active }) => {}, onDragResume: ({ active }) => {}, // onBeforeDrop answered 'continue' onDragSettle: ({ active, over }) => {}, // its overlay has landed }); ``` Ein Monitor hört jeden Drag unter seinem Provider, egal wo er startet: Das Panel oben protokolliert die Drags der Liste, ohne sie zu importieren. Er hört auf, wenn die Komponente, die ihn aufgerufen hat, unmountet wird.
Event Wann
onDragStart Ein Drag startet.
onDragMove Der Drag bewegt sich.
onDragOver Das Ziel unter dem Drag ändert sich.
onBeforeDrop Der Drag wird losgelassen. Seine Antwort entscheidet über den Drop: siehe Über einen Drop entscheiden .
onDragEnd Der Drop ist durchgegangen. Sortierbare Listen haben ihr onDrop schon ausgeführt und die neue Reihenfolge geschrieben. dropped ist false , wenn der Drag über keinem Ziel endete.
onDragCancel Escape, ein Drop auf ein Ziel, das ihn ablehnt, oder ein onBeforeDrop , das 'reject' geantwortet hat.
onDragResume onBeforeDrop hat 'continue' geantwortet: Nichts wurde abgelegt, und der Drag geht weiter.
onDragSettle Das Overlay des Drags ist gelandet (oder zurückgeflogen, oder vom nächsten Drag gefangen worden), mit dem Event, das onDragEnd oder onDragCancel bekommen hat. Inzwischen können andere Drags gestartet sein.
Jedes Event trägt `active`, `over`, `pointer`, `delta` (der Versatz zum Start), `position` (wo die gezogene Box in `over` sitzt, siehe [Drag and Drop](https://zizigy.github.io/docs/guides/drag-and-drop#leave-it-where-it-was-dropped)) und, für Elemente aus einer sortierbaren Liste, `source`. Die vollständigen Formen stehen in der [Events-API](https://zizigy.github.io/docs/api/events). `onDragEnd` ist der Ort für Arbeit „nach dem Drop“: Speichern, Auswahl leeren, Analytics. Das eigene `onDrop` einer Liste läuft **vor** ihrem Schreiben, sieht also noch die alte Reihenfolge. ## Das Ziel finden Wähle eine Funktion und ziehe dann die Nadel oder die Karte über die Ziele. Die Badges zeigen, wie die Funktion sie in diesem Frame einordnet; das grüne ist das Ziel. In jedem Frame eines Drags übergibt der Provider `collision` die Drop-Ziele im Spiel, und sie gibt deren IDs zurück, das beste zuerst. Fünf Funktionen bringt die Bibliothek mit:
Funktion Ordnet ein Gut für
pointerFirst Was unter dem Zeiger liegt; wenn dort nichts ist, was die gezogene Box überlappt. Der Standard: präzise unter dem Zeiger, nachsichtig in den Lücken.
pointerWithin Nur was unter dem Zeiger liegt, das innerste zuerst. Präzise Ziele: Eine Lücke legt nirgends ab.
rectIntersection Jedes Ziel, das die gezogene Box überlappt: höhere priority , dann tiefere Verschachtelung, dann die größere Überlappung. Große Elemente über kleinen Zielen, wenn der Zeiger am Rand des Elements ist.
closestCenter Jedes Ziel, nach dem Abstand vom Mittelpunkt der Box zu ihrem. Irgendetwas gewinnt immer, auch weit weg: Raster und Listen aus gleich großen Elementen.
closestCorners Jedes Ziel, nach den Abständen zwischen den vier Ecken. Nebeneinanderstehende Spalten (Kanban), Ziele mit sehr unterschiedlicher Höhe.
Unter dem Zeiger respektiert der Hit-Test, was der Nutzer sieht: Von überlappenden Zielen wird nur das oberste getroffen (`front`, nie `back`, wo sie sich überlappen), und von verschachtelten kommt das innerste zuerst (`subfolder`, dann `folder`). ### Eine eigene Funktion ```ts [magnet.ts] import type { CollisionDetection, Coordinates, Rect } from '@vue-dnd-kit/core'; /** How far the point is from the rect: 0 inside it. */ const gap = (rect: Rect, point: Coordinates) => Math.hypot( Math.max(rect.left - point.x, 0, point.x - rect.right), Math.max(rect.top - point.y, 0, point.y - rect.bottom), ); /** What is under the pointer; in a gap, the nearest target within 40px. */ export const magnet: CollisionDetection = ({ hits, pointer, candidates }) => { if (hits.length) return hits; return candidates .filter((candidate) => gap(candidate.rect, pointer) <= 40) .sort((a, b) => gap(a.rect, pointer) - gap(b.rect, pointer)) .map((candidate) => candidate.id); }; ```
Argument Was es enthält
pointer Der Zeiger, nach den Modifiern.
overlayRect Die gezogene Box, wie sie angezeigt wird, null ohne Overlay.
candidates Jedes Ziel im Spiel: id , rect (sein sichtbarer Teil, von Scroll-Containern beschnitten), priority , depth ( 0 ganz oben, tiefer bei Verschachtelung).
hits Die Ziele unter dem Zeiger aus dem Hit-Test, das beste zuerst.
Gib ein leeres Array für „kein Ziel“ zurück. Deaktivierte Ziele, Ziele in den gezogenen Elementen und Ziele, die von ihren Scroll-Containern verdeckt sind, erreichen die Funktion nie. Ein Ziel, das den Drag ablehnt, konkurriert trotzdem: Über ihm ist `over.accepted` `false`, und ein Drop wird abgelehnt (ein Ziel in einem sortierbaren Element tritt stattdessen zur Seite, damit die Liste darüber sortiert). Die Demo umhüllt die gewählte Funktion, um ihre Rangfolge festzuhalten: `(args) => (ranked.value = detect(args))`. Der Provider dämpft die Wechsel, die die Funktion verlangt. Ein Ziel, das der Drag gerade verlassen hat, kann erst wieder gewinnen, wenn sich der Zeiger 10 px bewegt hat, damit Grenzen nicht flackern. Zwischen den Zielen, die in einem Elternelement verschachtelt sind (die Lücken einer Spalte aus Karten), bleibt das letzte Ziel. ## Wann ein Drücken zum Drag wird Ein Drücken zieht nicht sofort. `activation` legt je nach Zeigerart (`mouse`, `touch`, `pen`) fest, worauf es wartet: eine `distance` in px, ein `delay` in ms (mit einer `tolerance`, nach der das Drücken aufgibt, damit die Seite scrollen kann) oder was von beiden zuerst eintritt. ```vue ```
Zeiger Standard
mouse , pen { distance: 4 } : Ein Klick bleibt ein Klick. Ein Mausdruck auf ein handle startet sofort und bleibt ein Klick, wenn sich die Maus nicht bewegt.
touch { delay: 200, tolerance: 5 } : ein langes Drücken, damit Listen unter dem Finger weiter scrollen.
Eine Art, die du weglässt, behält ihren Standard. Die eigene `activation` eines ziehbaren Elements gewinnt gegen die eines [Drag-Bereichs](https://zizigy.github.io/docs/guides/constraints), und die gewinnt gegen die des Providers. Während ein Drücken wartet, ist `useDnD().status` `'activating'`, und `activation.progress` läuft von `0` bis `1`; Escape oder `useDnD().cancel()` bricht es ab. Probiere die Bedingungen live aus und zeichne aus dem Fortschritt einen Ring fürs lange Drücken, in [Sensoren und programmatisches Ziehen](https://zizigy.github.io/docs/guides/sensors#activation-constraints). ## Auto-Scroll Ziehe einen Kanal zum oberen oder unteren Ende der Liste. Die grünen Streifen sind die Randzonen: Je tiefer du in einer bist, desto schneller scrollt die Liste. Jedes Element mit `overflow: auto` oder `scroll` scrollt von selbst, ebenso das Fenster. Der Provider scrollt zuerst den Container unter dem Zeiger, dann dessen Vorfahren, dann das Fenster.
Option Standard Was sie festlegt
threshold 0.2 Die Randzone als Anteil der Containergröße, zwischen 24 und 96 px.
acceleration 10 Die Geschwindigkeit ganz am Rand, in px pro Frame. Sie wächst mit dem Quadrat der Tiefe in der Zone, so ist der Anfang langsam und präzise.
maxSpeed 25 Die Höchstgeschwindigkeit. Jenseits des Rands (der Zeiger außerhalb des Containers) wächst die Geschwindigkeit bis zu ihr weiter.
`:auto-scroll="false"` schaltet es ab. Eine Richtung scrollt erst, wenn sich der Zeiger in diese Richtung bewegt hat, damit ein Element, das nahe an einem Rand aufgenommen wird, nicht von selbst scrollt. Listen, Bäume und [Drag-Bereiche](https://zizigy.github.io/docs/guides/constraints) nehmen ein eigenes `autoScroll` für ihren Container: ```ts makeSortableList(list, { items: channels, autoScroll: { maxSpeed: 10 } }); ``` Drags per Tastatur scrollen nie automatisch: Sie scrollen stattdessen das Element in den sichtbaren Bereich. `isAutoScrolling` (aus `useDnD()` oder einem Drag-Bereich) ist `true`, während etwas scrollt. ## Haptik und die Kopiertaste Ein Touch-Drag vibriert kurz, wenn er startet. `:haptics="false"` schaltet das ab; ein Objekt legt jede Vibration fest: ```vue ```
Schlüssel Vibriert, wenn Standard
start Das lange Drücken zum Drag wird. true (10 ms)
enter Der Drag ein Ziel betritt, das ihn annimmt. aus
drop Der Drop durchgeht. aus
refuse Der Drop abgelehnt wird und die Elemente zurückfliegen. aus
Jeder nimmt `true` (das Standardmuster), eine Länge in ms, ein An/Aus-Muster oder `false`. Nur Drags, die per Touch gestartet wurden, vibrieren, und iOS Safari kann überhaupt nicht vibrieren. `copyModifier` ist die Taste, die, während eines Drags zwischen Listen gehalten, aus dem Verschieben ein Kopieren macht: standardmäßig `'Alt'`, jeder `KeyboardEvent.key` oder `null` für keine. Die Liste, aus der die Elemente kommen, braucht eine `clone`-Funktion; siehe [Listen mit gemeinsamen Elementen](https://zizigy.github.io/docs/guides/shared-lists). ## Mehrere Provider Die meisten Apps brauchen genau einen. Setz die Wunschliste unter einen eigenen Provider und versuche dann, ein Buch hinüberzuschieben: Es kann seinen Provider nicht verlassen, und der äußere Monitor hört die Wunschliste nicht mehr. ```vue ``` - Provider sind unabhängig: Ein Drag wechselt nie von einem zum anderen. - Verschachtelte Provider sind erlaubt. **Der nächste Besitzer gewinnt**: Ein Element gehört zum nächstgelegenen Provider darüber, und der äußere Provider ignoriert es. - Jeder Provider hat seine eigene Auswahl, sein Overlay, seine Live-Region und seine Monitore. Ein zweiter Provider lohnt sich nur für einen Teil der Seite, der eigene providerweite Einstellungen braucht (Kollisionserkennung, Tastaturtasten, Ansagen) und dessen Elemente ihn nie verlassen. Wenn sich Elemente nicht zwischen zwei Teilen deiner Seite verschieben lassen, prüfe, ob sie nicht unter zwei Providern sitzen. Regeln für einen Teil der Seite (ein Board, das einrastet, ein Feed mit längerem Touch-Drücken, ein Panel, in dem nichts gezogen wird) brauchen keinen eigenen Provider: ```ts makeDragArea(board, { modifiers: [snapToGrid(20)], activation: { touch: { delay: 400 } } }); ``` Die Elemente des Bereichs bleiben im Provider der App und können sich weiterhin überallhin bewegen. Siehe [Achsen, Grenzen und Raster](https://zizigy.github.io/docs/guides/constraints). Eine App, die woanders gemountet ist, in einem Shadow Root oder als eigene Vue-App, kann sich einem bestehenden Provider anschließen: Übergib `useDnDContext()` an `provideDnDContext(app, context)`, bevor du sie mountest. Hit-Test und Overlay funktionieren über Shadow Roots hinweg. ## SSR und Nuxt Der Provider ist SSR-sicher. Listen und Elemente rendern auf dem Server wie jedes andere Markup. Das Overlay und die Live-Region werden teleportiert und nur auf dem Client gemountet, deshalb verursachen sie nie einen Hydration-Mismatch. Standard-IDs kommen von Vues `useId()` und stimmen zwischen Server und Client überein. In Nuxt registriert das Modul `DnDProvider` global und importiert die Composables automatisch: siehe [Installation](https://zizigy.github.io/docs/getting-started/installation#nuxt). ## Sitemap See the full [sitemap](https://zizigy.github.io/vue-dnd-kit/sitemap.md) for all pages.