--- title: "Migration von v2" description: "Bring eine v2-App auf v3 – was sich geändert hat und warum, das Upgrade, eine Zuordnung jeder v2-API zu ihrem Ersatz in v3, Code vorher und nachher für die häufigen Fälle und die Stolperfallen." canonical_url: "https://zizigy.github.io/vue-dnd-kit/de/docs/getting-started/migrating-from-v2" --- > Index of every page on this site: [llms.txt](https://zizigy.github.io/vue-dnd-kit/llms.txt) v3 ist eine Neufassung von v2. Das Modell bleibt: ein Provider und Composables, die du auf deinen eigenen Elementen aufrufst. Aber die meisten Namen und Optionen haben sich geändert, das Sortieren ist in die Bibliothek gewandert, und der Drop-Handler, den du für jede Liste geschrieben hast, fällt weg. Diese Seite ordnet jeden Teil von v2 seinem Gegenstück in v3 zu und zeigt dann die häufigen Fälle vorher und nachher. ## Was sich geändert hat - **Sortieren ist eingebaut.** In v2 war eine Liste eine Drop-Zone, ihre Zeilen waren ziehbare Elemente mit einem Payload `[index, items]`, und du hast in `onDrop` mit `e.helpers.suggestSort()` sortiert. In v3 erledigen das `makeSortableList` und `makeSortableItem`: Die Liste rendert einen **Entwurf** deines Arrays, der sich während des Ziehens neu ordnet, und der Drop schreibt das neue Array in dein Ref. Die meisten v2-Drop-Handler werden gelöscht, nicht portiert. - **Dinge bewegen sich von selbst.** Zeilen gleiten an ihre neuen Plätze (FLIP), das Overlay landet beim Drop in seinem Slot und fliegt beim Abbrechen zurück. `` fällt weg. - **Weiterhin ein Paket.** `@vue-dnd-kit/core` enthält Listen, Bäume, Multi-Drag, Modifier, Sensoren und die Kollisionsfunktionen. Das Nuxt-Modul bleibt; `@vue-dnd-kit/actions` (programmatisches Ziehen) und `@vue-dnd-kit/devtools` sind neu und optional. - **Ein echtes Overlay.** Es wird nach `body` teleportiert und zeigt einen tiefen Klon, so groß wie der Slot, in dem es landen wird. Overlay-Komponenten bekommen den Drag als Props, statt die Interna des Providers zu lesen. - **IDs statt Elemente.** Die Auswahl, die Events und der Zustand des Drags sind nach IDs aus deinen Daten geschlüsselt. Es gibt keine Maps von DOM-Elementen mehr zu lesen. - **Typen und Annahmeregeln** ersetzen `groups` für einfache ziehbare Elemente und Ziele. Listen tauschen Elemente über den Namen ihrer `group` aus. - **Entscheidungen vor dem Drop.** `onBeforeDrop` nimmt an, lehnt ab, lässt den Drag weiterlaufen oder nimmt nur einen Teil der Elemente. `onDrop` wendet nur noch an. - **Sensoren.** Zeiger- und Tastatureingaben sind Sensoren. Die Aktivierung wird pro Zeigerart festgelegt, und Touch-Drags beginnen mit langem Drücken, sodass Listen unter dem Finger weiter scrollen. - **Bereiche.** `makeDragArea` ersetzt `makeConstraintArea` und `makeAutoScroll`, und Auto-Scroll funktioniert ohne Code in jedem Scroll-Container. - **Barrierefreiheit ist standardmäßig an**: ARIA-Attribute, ein Fokus, der nach dem Drop zurückkehrt, und Ansagen für Screenreader. ## Upgrade ```bash [npm] npm i @vue-dnd-kit/core@^3 ``` ```bash [yarn] yarn add @vue-dnd-kit/core@^3 ``` ```bash [pnpm] pnpm add @vue-dnd-kit/core@^3 ``` ```bash [bun] bun add @vue-dnd-kit/core@^3 ```
Paket v2 v3
@vue-dnd-kit/core 2.4.x 3.x
@vue-dnd-kit/nuxt 1.x 3.x
@vue-dnd-kit/actions — 1.x, optional
@vue-dnd-kit/devtools — 3.x, optional
- Eine App, die `"@vue-dnd-kit/core": "^2…"` in ihrer `package.json` hat, bleibt auf v2, bis der Versionsbereich `^3` sagt. - Vue **3.5** oder neuer. v2 hatte keine Abhängigkeiten; v3 hat eine, `@vueuse/core` (14 oder 15). - Browser: Chrome und Edge 104+, Safari 15.4+, Firefox 104+. - v2 und v3 teilen sich einen Paketnamen, also wechselt eine App in einem Schritt auf v3. Es gibt keine Kompatibilitätsschicht. Die v2-Dokumentation bleibt über das Versionsmenü oben auf der Seite erreichbar. Eine gute Reihenfolge: 1. Aktualisiere die Pakete und benenne die Props des Providers um ([unten](#the-provider)). 2. Mach aus jeder sortierbaren Liste `makeSortableList` und `makeSortableItem`, und lösche ihren Drop-Handler. 3. Portiere die einfachen ziehbaren Elemente und Drop-Zonen. 4. Portiere eigene Vorschauen auf Overlay-Komponenten oder den Slot `#overlay` des Providers. 5. Ersetze `makeConstraintArea` und `makeAutoScroll` durch `makeDragArea` oder durch nichts. 6. Lösche die v2-Workarounds: `tabindex` und `aria-grabbed` auf ziehbaren Elementen, `touch-action: none` auf ganzen Elementen, `` um Zeilen, `markRaw` um Vorschau-Komponenten. ## Alt zu neu **Keine Entsprechung** in einer Tabelle heißt, dass v3 nichts unter diesem Namen hat; die Zelle sagt, was du stattdessen verwendest. ### Auf einen Blick
v2 v3
DnDProvider DnDProvider , mit neuen Props und einem Slot #overlay .
makeDraggable makeDraggable für freies Ziehen; makeSortableItem für die Zeilen einer Liste.
makeDroppable makeDroppable für einfache Drop-Ziele; makeSortableList oder makeSortableTree für Listen und Bäume.
makeSelectionArea makeSelectionArea .
makeConstraintArea makeDragArea .
makeAutoScroll Nichts: Auto-Scroll läuft automatisch. makeDragArea oder das autoScroll einer Liste stimmen es ab.
useDnDProvider useDnD für den Zustand, useDnDMonitor für die Events.
injectionKey useDnDContext() und provideDnDContext(app, context) .
DragPreview DragPreview : jetzt der Klon eines gezogenen Elements, für eigene Overlays.
makeSnappedOverlayPosition , Der Modifier snapToGrid .
e.helpers.suggestSort , suggestSwap , suggestCopy , suggestRemove In Listen eingebaut: siehe Sortieren .
### Der Provider
v2 v3
autoScrollViewport , aus, sofern nicht gesetzt autoScroll : standardmäßig an , für das Fenster und jeden Scroll-Container. { threshold, maxSpeed, acceleration } oder false .
previewTo , standardmäßig im Provider gerendert overlayTo : ein Selektor oder ein Element, standardmäßig 'body' .
Slot #preview="{ preview }" Slot #overlay , mit dem Drag als Props: items , active , over , accepted , status , mode , to . Siehe das Overlay .
keyboard.keys.forDrag , forDrop , forCancel (in useDnDProvider() gesetzt) :keyboard="{ keys: { start, drop, cancel } }" .
keyboard.step :keyboard="{ step }" : standardmäßig 25 px, für freie Drags.
keyboard.keys.forMove , forMoveFaster , keyboard.moveFaster Keine Entsprechung. Die Pfeiltasten bewegen; macht die Schritte eines freien Drags viermal so groß.
collision.throttle Keine Entsprechung. collision wählt, wie das Ziel gefunden wird: pointerFirst (Standard), pointerWithin , rectIntersection , closestCenter , closestCorners oder eine eigene Funktion.
Ein Provider pro Seite, nie verschachtelt Verschachteln funktioniert: Der nächstgelegene Provider verantwortet ein Element. Ein Provider für die ganze App bleibt das Ziel.
Neue Props ohne Gegenstück in v2: `activation`, `modifiers`, `sensors`, `animation`, `dropAnimation`, `animateChanges`, `haptics`, `copyModifier`, `overlayFit`, `overlayClass`, `overlayTransition`, `overlayPreviews`, `announcements`, `screenReaderInstructions` und `defaultStyles`. Der Provider emittiert außerdem `drag-start`, `drag-move`, `drag-over`, `drag-end`, `drag-cancel`, `drag-resume` und `drag-settle`. Alles davon steht im Leitfaden [Der Provider](https://zizigy.github.io/docs/guides/provider). ### Den Zustand lesen: `useDnD`
useDnDProvider() v3
state : 'dragging' , 'activating' , 'selecting' , 'pending' oder null useDnD().status : 'idle' , 'activating' , 'dragging' , 'dropping' oder 'selecting' . 'pending' (ein asynchroner Drop) ist 'dropping' ; null ist 'idle' .
pointer.value.current useDnD().pointer , nach den Modifiern. Jedes Event hat außerdem delta , den Versatz seit dem Start.
entities.draggingMap useDnD().active : id , ids , items , data , type , element , rect .
entities.selectedSet (Elemente) useDnD().selection (IDs): has , add , delete , toggle , set , clear , ids .
hovered.droppable , hovered.draggable useDnD().over : id , data , element , rect , accepted .
delay.progress , distanceProgress useDnD().activation.progress , von 0 bis 1 .
preview.position , preview.size , preview.render , preview.to Keine Entsprechung. Die Bibliothek platziert das Overlay und bestimmt seine Größe. Verwende overlayTo , den Slot #overlay oder Overlay-Komponenten.
entities.draggableMap , droppableMap , die visible…Set s, scrollPosition Keine Entsprechung.
— Neu: useDnD().cancel() , position , isAutoScrolling .
Die Events sind zu `useDnDMonitor` gewandert: siehe [Events und Drop-Entscheidungen](#events-and-drop-decisions). Die vollständigen Formen stehen in der [useDnD-API](https://zizigy.github.io/docs/api/use-dnd). ### `makeDraggable`
v2 v3
makeDraggable(ref, options, payload) makeDraggable(ref, options) : kein drittes Argument. Die Zeilen einer Liste verwenden makeSortableItem(ref, { item }) .
id , in virtuellen Listen nötig id : Übergib sie aus deinen Daten, als Getter. Der Standardwert kommt aus useId() und ist für jede Komponenteninstanz neu.
data: () => card data : ein Wert, ein Ref oder ein Getter. Zurückgelesen als active.data und active.items[i].data .
groups: ['dev'] type: 'dev' , abgeglichen mit dem accept der Ziele. Siehe Gruppen .
dragHandle: '.handle' handle : ein Selektor oder ein Element-Ref.
disabled disabled .
modifier: { keys, method } canDrag: (event) => event.altKey : eine Schranke für jedes Drücken.
activation: { distance, delay } activation pro Zeigerart: { mouse: { distance }, touch: { delay, tolerance }, pen } . Mit distance und delay zusammen startet der Drag bei dem, was zuerst eintritt.
activation.distance: { x, y, condition } Keine Entsprechung. Eine distance pro Zeigerart.
render: markRaw(Preview) overlay: Preview : Die Komponente bekommt den Drag als Props. Siehe das Overlay .
placementMargins Keine Entsprechung. Ein Drop-Ziel auf einem sortierbaren Element zählt in seiner Mitte (25 bis 75 %); Bäume verschachteln mit nesting: 'hover' . Siehe In ein sortierbares Element ablegen .
events.onSelfDragStart , onSelfDragMove , onSelfDragEnd , onSelfDragCancel Keine Entsprechung am ziehbaren Element: useDnDMonitor oder watch(isDragging) . Siehe Events .
events.onHover , onLeave und sein onDragStart … für Drags darüber Ein makeDroppable auf demselben Element: onDragEnter , onDragLeave .
Gibt isDragging , selected zurück Dasselbe.
Gibt isDragOver zurück Sortierbare Elemente geben indicator (mit placeholder: 'indicator' ) und isPlaceholder zurück; Ziele geben placement zurück.
Gibt isAllowed zurück Keine Entsprechung bei ziehbaren Elementen. Ziele geben isAccepting zurück.
— Neu: label , axis , modifiers , keyboardMode , overlay: false mit dem zurückgegebenen transform , dropAnimation , attributes , native .
### `makeDroppable`
v2 v3
makeDroppable(ref, options, () => items) makeDroppable(ref, options) . Eine Zone, die eine Liste enthält, ist ein makeSortableList .
groups accept : '*' , ein Typ, eine Liste von Typen oder eine Funktion.
groupMatch: 'every' , 'some' acceptMode: 'all' , 'some' .
events.onEnter , events.onLeave onDragEnter , onDragLeave : eigene Optionen, kein events -Objekt.
events.onDrop , das false oder ein Promise zurückgeben konnte onBeforeDrop entscheidet, onDrop wendet an. Siehe Drop-Entscheidungen .
events.onValidate onBeforeDrop , das die IDs zurückgibt, die bleiben sollen.
data data , zurückgelesen als over.data .
disabled disabled .
Gibt isAllowed zurück isAccepting .
Gibt isDragOver zurück: { top, right, bottom, left, center } isOver (ein Boolean) und placement : { top, right, bottom, left } , die Hälften, in denen der Zeiger ist. Es gibt kein center .
— Neu: id , label , priority , overOverlay , overDropAnimation , external (Dateien vom Computer).
### Das Drop-Event
v2 IDragEvent v3
e.draggedItems e.active.items : jeweils { id, item, data, label, type } , das gegriffene zuerst. Listen bekommen e.items und e.keys .
e.draggedItems[0].data e.active.data .
e.draggedItems[i].index , .items Listen: e.from , { list, index } .
e.dropZone : items , placement , data e.over : id , data , element , rect , accepted . Listen: e.to , { list, index } .
e.hoveredDraggable Keine Entsprechung : Listen ermitteln e.to.index selbst.
e.helpers.suggestSort() Listen schreiben den Drop; e.result enthält das neue Array jeder Liste, die er ändert.
e.helpers.suggestSwap() behavior: 'swap' auf der Liste; e.partner ist das Element, mit dem getauscht wurde.
e.helpers.suggestCopy() group: { name, pull: 'clone' } oder die Kopiertaste ( ), mit dem clone der Liste; e.mode ist 'copy' .
e.helpers.suggestRemove() e.source.remove() in einem Drop-Ziel oder dropOutside: 'remove' der Liste.
result.sameList e.sameList .
e.helpers.insertAt , removeAt , removeIndexes , swapAt , getInsertSide , isAtZoneStart , isAtZoneEnd Keine Entsprechung. Listen brauchen sie nicht; bei einem einfachen Ziel änderst du deine Daten, wie du willst.
e.provider useDnD() .
— Neu: e.pointer , e.delta , e.position (wohin ein auf einem Board abgelegtes Element kommt), e.mode .
### Sortieren
v2 v3
Eine makeDroppable -Liste mit () => items makeSortableList(listRef, { items }) .
Eine makeDraggable -Zeile mit () => [index, items] makeSortableItem(el, { item: () => props.task }) .
Dein Array rendern Die zurückgegebenen items rendern: den Entwurf, der sich während des Ziehens neu ordnet.
suggestSort('vertical') , suggestSort('horizontal') strategy: 'vertical' (Standard), 'horizontal' oder 'grid' .
Identitätsprüfungen, um Quell- und Ziel-Array zu finden, dann sourceItems und targetItems zuweisen Nichts: Der Drop schreibt jede Liste, die er ändert.
Eingebaut. animateChanges: true animiert Änderungen, die kein Drag ausgelöst hat (Hinzufügen, Entfernen, Mischen).
Eine Einfügelinie aus isDragOver.top , .bottom placeholder: 'indicator' und indicator.side des Elements. Siehe Eine Einfügelinie .
suggestSwap() behavior: 'swap' .
Eine Palette, die nur kopiert ( suggestCopy() und ein Flag copyOnly ) group: { name, pull: 'clone', put: false } , sort: false und clone .
Ein Papierkorb mit suggestRemove() makeDroppable(trash, { onDrop: (e) => e.source?.remove() }) oder dropOutside: 'remove' .
Pinia oder unveränderliche Daten: das Ergebnis selbst zuweisen items als Getter, dann e.preventDefault() in onDrop und e.result anwenden. Siehe Kontrollierte Listen .
Ein rekursiver Baum: ein Droppable pro Ordner und applyToTree makeSortableTree : ein Container, Zeilen flach mit ihrer Tiefe gerendert. Siehe Bäume .
Verschachtelte Gruppen mit v-model (ein Droppable pro Gruppe) Eine Liste in einer Liste, alle in einer group , jede mit items: defineModel() .
Virtuelle Listen: id auf jedem ziehbaren Element Gib den Entwurf an den Virtualizer, id: () => props.item.id auf den Zeilen. Siehe Virtuelle Listen .
Der Code vorher und nachher steht [unten](#a-sortable-list). Alles über Listen steht in [Sortierbare Listen](https://zizigy.github.io/docs/guides/sortable-lists) und [Listen mit gemeinsamen Elementen](https://zizigy.github.io/docs/guides/shared-lists). ### Gruppen v2 hatte eine Option `groups` für alles. v3 teilt sie in zwei:
v2 v3
makeDraggable(el, { groups: ['dev'] }) makeDraggable(el, { type: 'dev' }) .
makeDroppable(el, { groups: ['dev'] }) makeDroppable(el, { accept: 'dev' }) .
groups: ['dev', 'ops'] auf einer Zone accept: ['dev', 'ops'] oder eine Funktion: ({ active, items, types }) => boolean .
groups: [] oder keine type oder accept weggelassen. Die Regeln von v2 gelten: Ein ziehbares Element ohne Typ passt zu jeder Regel, und ein Ziel ohne accept nimmt alles an.
groupMatch: 'every' , 'some' acceptMode: 'all' , 'some' .
groups auf der Zone einer Liste und ihren Zeilen group: 'board' auf makeSortableList . group: { name, pull, put } sagt, was hinaus- und hineindarf.
groups auf makeSelectionArea accept .
Eine Liste ohne `group` ist eine eigene Gruppe und tauscht mit keiner anderen Liste. In v2 nahm eine Zone ohne Gruppen alles an. Siehe [Welche Drags ein Ziel annimmt](https://zizigy.github.io/docs/guides/drag-and-drop#which-drags-a-target-takes). ### Das Overlay
v2 v3
Eine Vorschau, im Provider gerendert, mit previewTo teleportiert Immer teleportiert, nach body oder nach overlayTo .
Ein Klon: dasselbe Tag, sein innerHTML und seine Größe Ein tiefer Klon: Formularwerte, -Pixel, geerbte Styles und Tabellenzellen kommen mit. Markiere, was zurückbleibt, mit data-dnd-no-clone .
render: markRaw(Preview) , das useDnDProvider().entities liest overlay: Preview , das items , active , over , accepted , status , mode und to als Props bekommt. Kein markRaw ; nimm ein shallowRef , um es zu wechseln.
Der Slot #preview , positioniert anhand von preview.position Der Slot #overlay : Die Bibliothek platziert die Box und bestimmt ihre Größe. Rendert er nichts, kommt der Klon zum Einsatz.
useDnDProvider().preview.render.value = … Der Slot #overlay oder ein shallowRef , als overlay übergeben.
Ein neues Aussehen über einer Zone, aus onEnter und onLeave overOverlay auf makeDroppable oder einer Liste, oder over in der Overlay-Komponente lesen. Siehe Ziele, die das Overlay ändern .
Die items der Overlay-Props; rendert einen Klon.
, makeSnappedOverlayPosition Der Modifier snapToGrid . Er rastet auch die Stelle ein, an der Ziele gesucht werden, und die position des Drops, nicht nur das Bild.
oder AnimatePresence von motion um DragPreview overlay-class mit @starting-style für das Aufnehmen, dropAnimation für das Landen, overlayTransition zwischen Komponenten. Siehe Das Overlay: anheben, neigen, ablegen .
.dnd-kit-preview [data-dnd-overlay] ( "dragging" , "dropping" ) auf der Box, [data-dnd-overlay-content] darin.
preview.size , von Hand aktuell gehalten Die Box nimmt die Größe des Slots an, in dem sie landen wird ( overlayFit ).
Die Vorschau verschwindet beim Drop Sie landet in ihrem Slot oder fliegt beim Abbrechen zurück.
Mehr im Leitfaden [Das Overlay](https://zizigy.github.io/docs/guides/overlay). ### Auswahl und Multi-Drag
v2 v3
selected , von makeDraggable zurückgegeben selected , von makeDraggable und makeSortableItem zurückgegeben.
entities.selectedSet , ein Set von Elementen useDnD().selection , nach ID geschlüsselt.
makeSelectionArea : standardmäßig Strg ( ControlLeft ) gedrückt Standardmäßig keine Taste: Ein Druck auf eine leere Stelle des Bereichs zeichnet den Rahmen. modifier: { keys: ['Control'], method: 'every' } bringt Strg zurück.
modifier.keys als KeyboardEvent.code KeyboardEvent.key ( 'Control' , 'Shift' ) oder .code ( 'ControlLeft' ).
strategy: 'toggle' , 'select' Dasselbe.
groups accept .
events.onSelected(elements) onSelected(ids) .
disabled Dasselbe.
suggestSort() , das die Auswahl als Block verschiebt Listen verschieben sie. multiple: 'group' (Standard), 'gaps' oder 'stack' sagt, was die anderen Elemente unterwegs tun.
onValidate für gemischte Auswahlen acceptMode: 'some' und onBeforeDrop , das IDs zurückgibt. Siehe Nur einige annehmen .
Mehr in [Multi-Drag und Auswahl](https://zizigy.github.io/docs/guides/multi-drag). ### Achsen, Grenzen und Einrasten
v2 v3
makeConstraintArea(el, { axis: 'x' }) makeDragArea(el, { axis: 'x' }) , für die Drags, die darin beginnen. axis funktioniert auch auf einem ziehbaren Element, einer Liste, einem Baum oder einem Element.
axis: 'both' axis weggelassen.
restrictToArea: true makeDragArea(el, { restrictToArea: true }) oder die Modifier restrictToParent und restrictToElement(el) .
Ein Provider pro Region, um Regeln getrennt zu halten Ein Provider und ein makeDragArea pro Region. Ihre Elemente können sich trotzdem überallhin bewegen.
, makeSnappedOverlayPosition snapToGrid(20) oder snapToGrid({ x, y, origin, smooth }) , in modifiers auf dem Provider, einem Bereich, einer Liste oder einem ziehbaren Element.
— Neu: restrictToWindowEdges , restrictToFirstScrollableAncestor , snapCenterToCursor und eigene Modifier.
Mehr in [Achsen, Grenzen und Raster](https://zizigy.github.io/docs/guides/constraints). ### Auto-Scroll
v2 v3
, standardmäßig aus Standardmäßig an, für das Fenster und jeden Scroll-Container. :auto-scroll="false" schaltet es ab.
makeAutoScroll(el, { threshold, speed }) Nichts: Jedes Element mit overflow: auto oder scroll scrollt. Um eines abzustimmen: makeDragArea(el, { autoScroll: { … } }) oder das autoScroll der Liste.
threshold in px oder pro Seite threshold : ein Bruchteil der Containergröße ( 0.2 ), zwischen 24 und 96 px. Keine Entsprechung für Schwellen pro Seite.
speed , ein Multiplikator maxSpeed (25 px pro Frame) und acceleration (10).
disabled: true autoScroll: false .
isScrolling isAutoScrolling , aus makeDragArea oder useDnD() .
### Tastatur und Barrierefreiheit
v2 v3
tabindex="0" auf jedem ziehbaren Element Wird für dich gesetzt, mit role , aria-roledescription , aria-describedby , aria-disabled und aria-pressed . Deine eigenen Attribute haben Vorrang.
:aria-grabbed="isDragging" von Hand Entferne es: aria-pressed folgt dem Drag.
Tasten in useDnDProvider().keyboard.keys gesetzt Die Prop keyboard des Providers. Tastenbelegungen passen auf event.code oder event.key .
Die Pfeiltasten bewegen die Vorschau um keyboard.step Freie Drags: keyboard.step px. Listen: von Slot zu Slot und in die nächste Liste der Gruppe. keyboardMode: 'droppables' springt zwischen Zielen.
Die Pfeiltasten umbelegen ( forMove , forMoveFaster ) Keine Entsprechung.
Keine Ansagen Eine Live-Region sagt jedes Aufnehmen, Bewegen, Ablegen und Abbrechen an. label benennt die Dinge; announcements und screenReaderInstructions formulieren sie um.
Mehr in [Barrierefreiheit](https://zizigy.github.io/docs/guides/accessibility). ### Events und Drop-Entscheidungen
v2 v3
events.onSelfDragStart des ziehbaren Elements useDnDMonitor({ onDragStart }) , mit Prüfung von active.ids . Für eine Klasse genügt isDragging .
onSelfDragMove onDragMove des Monitors.
onSelfDragEnd , abgelegt oder abgebrochen onDragEnd des Monitors (ein Drop) und onDragCancel . onDragSettle hört beides, sobald das Overlay gelandet ist.
onSelfDragCancel onDragCancel des Monitors.
onHover , onLeave des ziehbaren Elements und sein onDragStart … für Drags darüber makeDroppable auf dem Element: onDragEnter , onDragLeave . Zeilen einer Liste brauchen nichts.
events.onEnter , onLeave des Droppables onDragEnter , onDragLeave .
events.onDrop des Droppables onBeforeDrop entscheidet, dann wendet onDrop an. onDrop ist synchron, und sein Rückgabewert wird ignoriert.
events.onValidate des Droppables onBeforeDrop , mit acceptMode: 'some' .
— Neu: @drag-start … @drag-settle des Providers sowie onDragOver , onBeforeDrop und onDragResume des Monitors.
Ein v2-`onDrop` konnte einen Wert oder ein Promise darauf zurückgeben, um über den Drop zu entscheiden. In v3 ist das die Aufgabe von `onBeforeDrop`, auf Listen, Bäumen, Drop-Zielen und Monitoren:
v2 onDrop gibt zurück v3 onBeforeDrop gibt zurück
Nichts oder true : Der Drop geht durch 'accept' , true oder nichts.
false : Dieser Drop wird ausgeschlagen, der Drag bleibt aktiv 'continue' . false lehnt den Drop jetzt ab.
Ein abgelehntes Promise oder ein Throw: Der Drag wird abgebrochen 'reject' oder false . Ein Throw lehnt ebenfalls ab.
Ein Promise; währenddessen ist state 'pending' Ein Promise; währenddessen ist status 'dropping' , und das Overlay wartet mit data-dnd-overlay="dropping" .
onValidate gibt IDragItem[] zurück Ein Array von IDs: Nur diese werden abgelegt, die anderen fliegen zurück.
Die Monitore antworten zuerst, dann das Ziel. Danach läuft das `onDrop` des Ziels, eine Liste schreibt ihre neuen Arrays, und `onDragEnd` folgt. Mehr in [Über einen Drop entscheiden](https://zizigy.github.io/docs/guides/drop-decisions) und in der [Events-API](https://zizigy.github.io/docs/api/events). ### Typen
v2 v3
IDragEvent DnDEvent (Ziele, Monitore), SortableDropEvent (Listen), DnDEndEvent ( onDragEnd ).
IDragItem DragItem .
IDropZoneContext Over .
IHoveredDraggableContext Keine Entsprechung.
ISuggestSortResult , ISuggestSwapResult , ISuggestCopyResult , ISuggestRemoveResult SortableDropEvent : result , to , mode , partner .
IDropValidateEvent DnDEvent , in onBeforeDrop .
IPlacement Placement , ohne center .
ICoordinates Coordinates .
IDragActivationOptions ActivationOptions .
IAutoScrollOptions AutoScrollOptions .
TDnDState DnDStatus .
IDnDProviderExternal DnDState , was useDnD() zurückgibt.
IDraggableEvents , IDroppableEvents Callbacks in DraggableOptions , DroppableOptions und DnDMonitor .
### Nuxt ```bash npm i @vue-dnd-kit/nuxt@^3 @vue-dnd-kit/core@^3 ```
v2 ( @vue-dnd-kit/nuxt 1.x) v3 ( @vue-dnd-kit/nuxt 3.x)
Importiert automatisch makeDraggable , makeDroppable , makeSelectionArea , makeConstraintArea , makeAutoScroll , useDnDProvider Importiert automatisch makeDraggable , makeDroppable , makeSortableList , makeSortableItem , makeSortableTree , makeSelectionArea , makeDragArea , useDnD , useDnDMonitor .
Keine Typen automatisch importiert Die wichtigsten Typen schon ( DnDEvent , SortableDropEvent , OverlayProps …). Generische ( Key , Active , Over ) werden von Hand importiert.
— Modifier, Kollisionsfunktionen und Sensoren auf Wunsch: vueDndKit: { autoImports: { modifiers: true, collision: true, sensors: true } } .
DnDProvider und DragPreview global Dasselbe, mit einer Option prefix .
im Layout, innerhalb des Providers Entferne es: Der Provider rendert das Overlay. DragPreview nimmt eine id und gehört in Overlay-Komponenten.
Peer @vue-dnd-kit/core 2 Peer @vue-dnd-kit/core 3; Nuxt 4.
`modules: ['@vue-dnd-kit/nuxt']` in `nuxt.config.ts` bleibt, wie es war. Siehe [Installation](https://zizigy.github.io/docs/getting-started/installation#nuxt). ## Vorher und nachher ### Ein ziehbares Element und eine Drop-Zone **v2** ```vue [Card.vue] ``` ```vue [Zone.vue] ``` **v3** ```vue [Card.vue] ``` ```vue [Zone.vue] ``` - Die Karte bekommt `tabindex`, `role` und die `aria-*`-Attribute von selbst. Ein `