--- title: "Migrar desde la v2" description: "Pasa una app de la v2 a la v3 — qué cambió y por qué, la actualización, un mapa de cada API de la v2 a su sustituta en la v3, código de antes y después para los casos habituales, y los escollos." canonical_url: "https://zizigy.github.io/vue-dnd-kit/es/docs/getting-started/migrating-from-v2" --- > Index of every page on this site: [llms.txt](https://zizigy.github.io/vue-dnd-kit/llms.txt) La v3 es una reescritura de la v2. El modelo se mantiene: un provider, y composables que llamas sobre tus propios elementos. Pero la mayoría de los nombres y de las opciones cambiaron, la ordenación pasó a la biblioteca, y el handler de drop que escribías para cada lista desaparece. Esta página relaciona cada parte de la v2 con la v3 y luego muestra los casos habituales antes y después. ## Qué cambió - **La ordenación viene incluida.** En la v2, una lista era una zona de drop, sus filas eran elementos arrastrables con un payload `[index, items]`, y ordenabas en `onDrop` con `e.helpers.suggestSort()`. En la v3 lo hacen `makeSortableList` y `makeSortableItem`: la lista renderiza un **borrador** de tu array que se reordena mientras arrastras, y el drop escribe el nuevo array en tu ref. La mayoría de los handlers de drop de la v2 se borran, no se portan. - **Las cosas se mueven solas.** Las filas se deslizan a sus nuevos sitios (FLIP), el overlay aterriza en su hueco al soltar y vuelve a su sitio al cancelar. `` desaparece. - **Sigue siendo un solo paquete.** `@vue-dnd-kit/core` contiene las listas, los árboles, el multi-drag, los modificadores, los sensores y las funciones de colisión. El módulo de Nuxt se mantiene; `@vue-dnd-kit/actions` (arrastres programáticos) y `@vue-dnd-kit/devtools` son nuevos y opcionales. - **Un overlay de verdad.** Se teletransporta a `body` y muestra un clon profundo, con el tamaño del hueco en el que aterrizará. Los componentes de overlay reciben el arrastre como props en lugar de leer las interioridades del provider. - **Ids, no elementos.** La selección, los eventos y el estado del arrastre usan como clave ids de tus datos. No hay mapas de elementos del DOM que leer. - **Los tipos y las reglas de aceptación** sustituyen a `groups` para los elementos arrastrables simples y los destinos. Las listas intercambian ítems por el nombre de su `group`. - **Decisiones antes del drop.** `onBeforeDrop` acepta, rechaza, mantiene el arrastre en curso o se queda con parte de los ítems. `onDrop` solo aplica. - **Sensores.** La entrada de puntero y la de teclado son sensores. La activación se configura por tipo de puntero, y los arrastres táctiles empiezan con una pulsación larga, así que las listas se siguen desplazando bajo el dedo. - **Áreas.** `makeDragArea` sustituye a `makeConstraintArea` y `makeAutoScroll`, y el desplazamiento automático funciona en todo contenedor desplazable sin código. - **La accesibilidad viene activada por defecto**: atributos ARIA, un foco que vuelve tras el drop y anuncios para lectores de pantalla. ## Actualizar ```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 ```
Paquete 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, opcional
@vue-dnd-kit/devtools — 3.x, opcional
- Una app que tiene `"@vue-dnd-kit/core": "^2…"` en su `package.json` se queda en la v2 hasta que el rango diga `^3`. - Vue **3.5** o posterior. La v2 no tenía dependencias; la v3 tiene una, `@vueuse/core` (14 o 15). - Navegadores: Chrome y Edge 104+, Safari 15.4+, Firefox 104+. - La v2 y la v3 comparten nombre de paquete, así que una app pasa a la v3 de una vez. No hay capa de compatibilidad. La documentación de la v2 sigue disponible desde el menú de versiones de la parte superior de la página. Un buen orden de trabajo: 1. Actualiza los paquetes y renombra las props del provider ([más abajo](#the-provider)). 2. Convierte cada lista ordenable en `makeSortableList` y `makeSortableItem`, y borra su handler de drop. 3. Porta los elementos arrastrables simples y las zonas de drop. 4. Porta las vistas previas personalizadas a componentes de overlay o al slot `#overlay` del provider. 5. Sustituye `makeConstraintArea` y `makeAutoScroll` por `makeDragArea`, o por nada. 6. Borra los apaños de la v2: `tabindex` y `aria-grabbed` en los elementos arrastrables, `touch-action: none` en ítems enteros, `` alrededor de las filas, `markRaw` alrededor de los componentes de vista previa. ## De lo antiguo a lo nuevo **Sin equivalente** en una tabla significa que la v3 no tiene nada con ese nombre; la celda dice qué usar en su lugar. ### De un vistazo
v2 v3
DnDProvider DnDProvider , con props nuevas y un slot #overlay .
makeDraggable makeDraggable para el arrastre libre; makeSortableItem para las filas de una lista.
makeDroppable makeDroppable para destinos de drop simples; makeSortableList o makeSortableTree para listas y árboles.
makeSelectionArea makeSelectionArea .
makeConstraintArea makeDragArea .
makeAutoScroll Nada: el desplazamiento automático es automático. makeDragArea o el autoScroll de una lista lo ajustan.
useDnDProvider useDnD para el estado, useDnDMonitor para los eventos.
injectionKey useDnDContext() y provideDnDContext(app, context) .
DragPreview DragPreview : ahora el clon de un ítem arrastrado, para overlays propios.
makeSnappedOverlayPosition , El modificador snapToGrid .
e.helpers.suggestSort , suggestSwap , suggestCopy , suggestRemove Integrados en las listas: consulta ordenación .
### El provider
v2 v3
autoScrollViewport , desactivado salvo que se active autoScroll : activado por defecto , para la ventana y todo contenedor desplazable. { threshold, maxSpeed, acceleration } , o false .
previewTo , renderizado por defecto dentro del provider overlayTo : un selector o un elemento, 'body' por defecto.
Slot #preview="{ preview }" Slot #overlay , con el arrastre como props: items , active , over , accepted , status , mode , to . Consulta el overlay .
keyboard.keys.forDrag , forDrop , forCancel (configurados en useDnDProvider() ) :keyboard="{ keys: { start, drop, cancel } }" .
keyboard.step :keyboard="{ step }" : 25 px por defecto, para arrastres libres.
keyboard.keys.forMove , forMoveFaster , keyboard.moveFaster Sin equivalente. Las flechas mueven; hace cuatro veces más grandes los pasos de un arrastre libre.
collision.throttle Sin equivalente. collision elige cómo se encuentra el destino: pointerFirst (por defecto), pointerWithin , rectIntersection , closestCenter , closestCorners o una función tuya.
Un provider por página, nunca anidado Anidar funciona: el provider más cercano gestiona cada ítem. Un provider para toda la app sigue siendo el objetivo.
Props nuevas sin equivalente en la v2: `activation`, `modifiers`, `sensors`, `animation`, `dropAnimation`, `animateChanges`, `haptics`, `copyModifier`, `overlayFit`, `overlayClass`, `overlayTransition`, `overlayPreviews`, `announcements`, `screenReaderInstructions` y `defaultStyles`. El provider también emite `drag-start`, `drag-move`, `drag-over`, `drag-end`, `drag-cancel`, `drag-resume` y `drag-settle`. Todo está en [la guía del provider](https://zizigy.github.io/docs/guides/provider). ### Leer el estado: `useDnD`
useDnDProvider() v3
state : 'dragging' , 'activating' , 'selecting' , 'pending' o null useDnD().status : 'idle' , 'activating' , 'dragging' , 'dropping' o 'selecting' . 'pending' (un drop asíncrono) es 'dropping' ; null es 'idle' .
pointer.value.current useDnD().pointer , tras los modificadores. Cada evento tiene además delta , el desplazamiento desde el inicio.
entities.draggingMap useDnD().active : id , ids , items , data , type , element , rect .
entities.selectedSet (elementos) 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 , de 0 a 1 .
preview.position , preview.size , preview.render , preview.to Sin equivalente. La biblioteca coloca y dimensiona el overlay. Usa overlayTo , el slot #overlay o componentes de overlay.
entities.draggableMap , droppableMap , los visible…Set , scrollPosition Sin equivalente.
— Nuevo: useDnD().cancel() , position , isAutoScrolling .
Los eventos pasaron a `useDnDMonitor`: consulta [eventos y decisiones de drop](#events-and-drop-decisions). Las formas completas están en la [API de useDnD](https://zizigy.github.io/docs/api/use-dnd). ### `makeDraggable`
v2 v3
makeDraggable(ref, options, payload) makeDraggable(ref, options) : sin tercer argumento. Las filas de una lista usan makeSortableItem(ref, { item }) .
id , necesario en listas virtuales id : pásalo desde tus datos, como getter. El valor por defecto viene de useId() y es nuevo en cada instancia del componente.
data: () => card data : un valor, una ref o un getter. Se lee como active.data y active.items[i].data .
groups: ['dev'] type: 'dev' , comparado con el accept de los destinos. Consulta grupos .
dragHandle: '.handle' handle : un selector o una ref de elemento.
disabled disabled .
modifier: { keys, method } canDrag: (event) => event.altKey : un filtro para cada pulsación.
activation: { distance, delay } activation por tipo de puntero: { mouse: { distance }, touch: { delay, tolerance }, pen } . Con distance y delay a la vez, el arrastre empieza con lo que llegue primero.
activation.distance: { x, y, condition } Sin equivalente. Una distance por tipo de puntero.
render: markRaw(Preview) overlay: Preview : el componente recibe el arrastre como props. Consulta el overlay .
placementMargins Sin equivalente. Un destino de drop sobre un ítem ordenable cuenta en su parte central (del 25 al 75 %); los árboles anidan con nesting: 'hover' . Consulta soltar dentro de un ítem ordenable .
events.onSelfDragStart , onSelfDragMove , onSelfDragEnd , onSelfDragCancel Sin equivalente en el elemento arrastrable: useDnDMonitor , o watch(isDragging) . Consulta eventos .
events.onHover , onLeave , y su onDragStart … para los arrastres que pasan por encima Un makeDroppable en el mismo elemento: onDragEnter , onDragLeave .
Devuelve isDragging , selected Lo mismo.
Devuelve isDragOver Los ítems ordenables devuelven indicator (con placeholder: 'indicator' ) e isPlaceholder ; los destinos devuelven placement .
Devuelve isAllowed Sin equivalente en los elementos arrastrables. Los destinos devuelven isAccepting .
— Nuevo: label , axis , modifiers , keyboardMode , overlay: false con el transform devuelto, dropAnimation , attributes , native .
### `makeDroppable`
v2 v3
makeDroppable(ref, options, () => items) makeDroppable(ref, options) . Una zona que contiene una lista es un makeSortableList .
groups accept : '*' , un tipo, una lista de tipos o una función.
groupMatch: 'every' , 'some' acceptMode: 'all' , 'some' .
events.onEnter , events.onLeave onDragEnter , onDragLeave : opciones propias, sin objeto events .
events.onDrop , que podía devolver false o una promesa onBeforeDrop decide, onDrop aplica. Consulta decisiones de drop .
events.onValidate onBeforeDrop , devolviendo los ids que se aceptan.
data data , que se lee como over.data .
disabled disabled .
Devuelve isAllowed isAccepting .
Devuelve isDragOver : { top, right, bottom, left, center } isOver (un booleano), y placement : { top, right, bottom, left } , las mitades en las que está el puntero. No hay center .
— Nuevo: id , label , priority , overOverlay , overDropAnimation , external (archivos del ordenador).
### El evento de drop
IDragEvent de la v2 v3
e.draggedItems e.active.items : { id, item, data, label, type } cada uno, empezando por el que se agarró. Las listas reciben e.items y e.keys .
e.draggedItems[0].data e.active.data .
e.draggedItems[i].index , .items Listas: e.from , { list, index } .
e.dropZone : items , placement , data e.over : id , data , element , rect , accepted . Listas: e.to , { list, index } .
e.hoveredDraggable Sin equivalente : las listas calculan e.to.index por sí mismas.
e.helpers.suggestSort() Las listas escriben el drop; e.result contiene el nuevo array de cada lista que cambia.
e.helpers.suggestSwap() behavior: 'swap' en la lista; e.partner es el ítem con el que se intercambió.
e.helpers.suggestCopy() group: { name, pull: 'clone' } o la tecla de copia ( ), con el clone de la lista; e.mode es 'copy' .
e.helpers.suggestRemove() e.source.remove() en un destino de drop, o el dropOutside: 'remove' de la lista.
result.sameList e.sameList .
e.helpers.insertAt , removeAt , removeIndexes , swapAt , getInsertSide , isAtZoneStart , isAtZoneEnd Sin equivalente. Las listas no los necesitan; para un destino simple, cambia tus datos como quieras.
e.provider useDnD() .
— Nuevo: e.pointer , e.delta , e.position (dónde poner un ítem soltado sobre un tablero), e.mode .
### Ordenación
v2 v3
Una lista makeDroppable con () => items makeSortableList(listRef, { items }) .
Una fila makeDraggable con () => [index, items] makeSortableItem(el, { item: () => props.task }) .
Renderizar tu array Renderizar los items devueltos: el borrador que se reordena mientras arrastras.
suggestSort('vertical') , suggestSort('horizontal') strategy: 'vertical' (por defecto), 'horizontal' o 'grid' .
Comprobaciones de identidad para encontrar los arrays de origen y de destino, y luego asignar sourceItems y targetItems Nada: el drop escribe cada lista que cambia.
Incluido. animateChanges: true anima los cambios que no hizo ningún arrastre (añadir, quitar, barajar).
Una línea de inserción a partir de isDragOver.top , .bottom placeholder: 'indicator' y el indicator.side del ítem. Consulta una línea de inserción .
suggestSwap() behavior: 'swap' .
Una paleta que solo copia ( suggestCopy() y un flag copyOnly ) group: { name, pull: 'clone', put: false } , sort: false y clone .
Una papelera con suggestRemove() makeDroppable(trash, { onDrop: (e) => e.source?.remove() }) , o dropOutside: 'remove' .
Pinia o datos inmutables: asignar tú el resultado items como getter, luego e.preventDefault() en onDrop y aplicar e.result . Consulta listas controladas .
Un árbol recursivo: un droppable por carpeta y applyToTree makeSortableTree : un solo contenedor, filas renderizadas en plano con su profundidad. Consulta árboles .
Grupos anidados con v-model (un droppable por grupo) Una lista dentro de una lista, todas en un mismo group , cada una con items: defineModel() .
Listas virtuales: id en cada elemento arrastrable Pasa el borrador al virtualizador, id: () => props.item.id en las filas. Consulta listas virtuales .
El código de antes y después está [más abajo](#a-sortable-list). Todo sobre las listas está en [listas ordenables](https://zizigy.github.io/docs/guides/sortable-lists) y [listas que comparten ítems](https://zizigy.github.io/docs/guides/shared-lists). ### Grupos La v2 tenía una sola opción `groups` para todo. La v3 la divide en dos:
v2 v3
makeDraggable(el, { groups: ['dev'] }) makeDraggable(el, { type: 'dev' }) .
makeDroppable(el, { groups: ['dev'] }) makeDroppable(el, { accept: 'dev' }) .
groups: ['dev', 'ops'] en una zona accept: ['dev', 'ops'] , o una función: ({ active, items, types }) => boolean .
groups: [] , o ninguno Sin type ni accept . Las reglas de la v2 se mantienen: un elemento arrastrable sin tipo encaja en cualquier regla, y un destino sin accept lo acepta todo.
groupMatch: 'every' , 'some' acceptMode: 'all' , 'some' .
groups en la zona de una lista y en sus filas group: 'board' en makeSortableList . group: { name, pull, put } dice qué puede salir y entrar.
groups en makeSelectionArea accept .
Una lista sin `group` es un grupo propio y no intercambia con ninguna otra lista. En la v2, una zona sin grupos lo aceptaba todo. Consulta [qué arrastres acepta un destino](https://zizigy.github.io/docs/guides/drag-and-drop#which-drags-a-target-takes). ### El overlay
v2 v3
Una vista previa renderizada en el provider, teletransportada con previewTo Siempre teletransportado, a body o a overlayTo .
Un clon: la misma etiqueta, su innerHTML y su tamaño Un clon profundo: los valores de los formularios, los píxeles de , los estilos heredados y las celdas de tabla vienen incluidos. Marca lo que se queda fuera con data-dnd-no-clone .
render: markRaw(Preview) , que lee useDnDProvider().entities overlay: Preview , que recibe items , active , over , accepted , status , mode y to como props. Sin markRaw ; usa un shallowRef para cambiarlo.
El slot #preview , posicionado a partir de preview.position El slot #overlay : la biblioteca coloca y dimensiona la caja. Si no renderiza nada, se vuelve al clon.
useDnDProvider().preview.render.value = … El slot #overlay , o un shallowRef pasado como overlay .
Un aspecto nuevo sobre una zona, desde onEnter y onLeave overOverlay en makeDroppable o en una lista, o leer over en el componente de overlay. Consulta destinos que cambian el overlay .
Los items de las props del overlay; renderiza un clon.
, makeSnappedOverlayPosition El modificador snapToGrid . Ajusta a la cuadrícula el punto donde se buscan los destinos y también la position del drop, no solo la imagen.
o el AnimatePresence de motion alrededor de DragPreview overlay-class con @starting-style para el agarre, dropAnimation para el aterrizaje, overlayTransition entre componentes. Consulta levantar, inclinar, asentar .
.dnd-kit-preview [data-dnd-overlay] ( "dragging" , "dropping" ) en la caja, [data-dnd-overlay-content] dentro de ella.
preview.size , actualizado a mano La caja toma el tamaño del hueco en el que aterrizará ( overlayFit ).
La vista previa desaparece al soltar Aterriza en su hueco, o vuelve a su sitio al cancelar.
Más en [la guía del overlay](https://zizigy.github.io/docs/guides/overlay). ### Selección y multi-drag
v2 v3
selected , devuelto por makeDraggable selected , devuelto por makeDraggable y makeSortableItem .
entities.selectedSet , un conjunto de elementos useDnD().selection , con ids como clave.
makeSelectionArea : Ctrl ( ControlLeft ) pulsado por defecto Sin tecla por defecto: una pulsación en el espacio vacío del área dibuja el rectángulo. modifier: { keys: ['Control'], method: 'every' } recupera Ctrl.
modifier.keys como KeyboardEvent.code KeyboardEvent.key ( 'Control' , 'Shift' ) o .code ( 'ControlLeft' ).
strategy: 'toggle' , 'select' Lo mismo.
groups accept .
events.onSelected(elements) onSelected(ids) .
disabled Lo mismo.
suggestSort() moviendo la selección en bloque Las listas la mueven. multiple: 'group' (por defecto), 'gaps' o 'stack' dice qué hacen los demás ítems por el camino.
onValidate para selecciones mixtas acceptMode: 'some' y onBeforeDrop devolviendo ids. Consulta aceptar solo algunos .
Más en [multi-drag y selección](https://zizigy.github.io/docs/guides/multi-drag). ### Ejes, límites y ajuste
v2 v3
makeConstraintArea(el, { axis: 'x' }) makeDragArea(el, { axis: 'x' }) , para los arrastres que empiezan dentro de ella. axis también funciona en un elemento arrastrable, una lista, un árbol o un ítem.
axis: 'both' Sin axis .
restrictToArea: true makeDragArea(el, { restrictToArea: true }) , o los modificadores restrictToParent y restrictToElement(el) .
Un provider por región, para mantener las reglas separadas Un provider y un makeDragArea por región. Sus ítems pueden seguir moviéndose a cualquier sitio.
, makeSnappedOverlayPosition snapToGrid(20) o snapToGrid({ x, y, origin, smooth }) , en los modifiers del provider, de un área, de una lista o de un elemento arrastrable.
— Nuevo: restrictToWindowEdges , restrictToFirstScrollableAncestor , snapCenterToCursor y modificadores propios.
Más en [ejes, límites y cuadrículas](https://zizigy.github.io/docs/guides/constraints). ### Desplazamiento automático
v2 v3
, desactivado por defecto Activado por defecto, para la ventana y todo contenedor desplazable. :auto-scroll="false" lo desactiva.
makeAutoScroll(el, { threshold, speed }) Nada: cualquier elemento con overflow: auto o scroll se desplaza. Para ajustar uno: makeDragArea(el, { autoScroll: { … } }) o el autoScroll de la lista.
threshold en px, o por lado threshold : una fracción del tamaño del contenedor ( 0.2 ), entre 24 y 96 px. Sin equivalente para umbrales por lado.
speed , un multiplicador maxSpeed (25 px por frame) y acceleration (10).
disabled: true autoScroll: false .
isScrolling isAutoScrolling , de makeDragArea o de useDnD() .
### Teclado y accesibilidad
v2 v3
tabindex="0" en cada elemento arrastrable Se pone por ti, con role , aria-roledescription , aria-describedby , aria-disabled y aria-pressed . Tus propios atributos tienen prioridad.
:aria-grabbed="isDragging" a mano Quítalo: aria-pressed sigue el arrastre.
Teclas configuradas en useDnDProvider().keyboard.keys La prop keyboard del provider. Las asignaciones coinciden con event.code o event.key .
Las flechas mueven la vista previa keyboard.step Arrastres libres: keyboard.step px. Listas: de hueco en hueco, y hacia la siguiente lista del grupo. keyboardMode: 'droppables' salta entre destinos.
Reasignar las flechas ( forMove , forMoveFaster ) Sin equivalente.
Sin anuncios Una región viva anuncia cada agarre, movimiento, drop y cancelación. label pone nombre a las cosas; announcements y screenReaderInstructions cambian su redacción.
Más en [accesibilidad](https://zizigy.github.io/docs/guides/accessibility). ### Eventos y decisiones de drop
v2 v3
events.onSelfDragStart del elemento arrastrable useDnDMonitor({ onDragStart }) , comprobando active.ids . Para una clase, basta con isDragging .
onSelfDragMove El onDragMove del monitor.
onSelfDragEnd , soltado o cancelado El onDragEnd del monitor (un drop) y onDragCancel . onDragSettle escucha ambos, una vez que el overlay ha aterrizado.
onSelfDragCancel El onDragCancel del monitor.
onHover , onLeave del elemento arrastrable, y su onDragStart … para los arrastres que pasan por encima makeDroppable en el elemento: onDragEnter , onDragLeave . Las filas de una lista no necesitan nada.
events.onEnter , onLeave del droppable onDragEnter , onDragLeave .
events.onDrop del droppable onBeforeDrop decide, luego onDrop aplica. onDrop es síncrono, y lo que devuelve se ignora.
events.onValidate del droppable onBeforeDrop , con acceptMode: 'some' .
— Nuevo: los @drag-start … @drag-settle del provider, y los onDragOver , onBeforeDrop y onDragResume del monitor.
Un `onDrop` de la v2 podía devolver un valor, o una promesa de uno, para decidir el drop. En la v3 esa es la tarea de `onBeforeDrop`, en listas, árboles, destinos de drop y monitores:
onDrop de la v2 devuelve onBeforeDrop de la v3 devuelve
Nada, o true : el drop se completa 'accept' , true o nada.
false : este drop se descarta, el arrastre sigue activo 'continue' . false ahora rechaza el drop.
Una promesa rechazada, o una excepción: el arrastre se cancela 'reject' o false . Una excepción también rechaza.
Una promesa; mientras tanto state es 'pending' Una promesa; mientras tanto status es 'dropping' y el overlay espera con data-dnd-overlay="dropping" .
onValidate devuelve IDragItem[] Un array de ids: solo esos se sueltan, los demás vuelven a su sitio.
Los monitores responden primero, luego el destino. Después se ejecuta el `onDrop` del destino, una lista escribe sus nuevos arrays y le sigue `onDragEnd`. Más en [decidir un drop](https://zizigy.github.io/docs/guides/drop-decisions) y en la [API de eventos](https://zizigy.github.io/docs/api/events). ### Tipos
v2 v3
IDragEvent DnDEvent (destinos, monitores), SortableDropEvent (listas), DnDEndEvent ( onDragEnd ).
IDragItem DragItem .
IDropZoneContext Over .
IHoveredDraggableContext Sin equivalente.
ISuggestSortResult , ISuggestSwapResult , ISuggestCopyResult , ISuggestRemoveResult SortableDropEvent : result , to , mode , partner .
IDropValidateEvent DnDEvent , en onBeforeDrop .
IPlacement Placement , sin center .
ICoordinates Coordinates .
IDragActivationOptions ActivationOptions .
IAutoScrollOptions AutoScrollOptions .
TDnDState DnDStatus .
IDnDProviderExternal DnDState , lo que devuelve useDnD() .
IDraggableEvents , IDroppableEvents Callbacks en DraggableOptions , DroppableOptions y 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)
Importa automáticamente makeDraggable , makeDroppable , makeSelectionArea , makeConstraintArea , makeAutoScroll , useDnDProvider Importa automáticamente makeDraggable , makeDroppable , makeSortableList , makeSortableItem , makeSortableTree , makeSelectionArea , makeDragArea , useDnD , useDnDMonitor .
Ningún tipo importado automáticamente Los tipos principales sí ( DnDEvent , SortableDropEvent , OverlayProps …). Los genéricos ( Key , Active , Over ) se importan a mano.
— Modificadores, funciones de colisión y sensores, a petición: vueDndKit: { autoImports: { modifiers: true, collision: true, sensors: true } } .
DnDProvider y DragPreview globales Lo mismo, con una opción prefix .
en el layout, dentro del provider Quítalo: el provider renderiza el overlay. DragPreview recibe un id y va dentro de los componentes de overlay.
Dependencia peer @vue-dnd-kit/core 2 Dependencia peer @vue-dnd-kit/core 3; Nuxt 4.
`modules: ['@vue-dnd-kit/nuxt']` en `nuxt.config.ts` se queda como estaba. Consulta [instalación](https://zizigy.github.io/docs/getting-started/installation#nuxt). ## Antes y después ### Un elemento arrastrable y una zona de drop **v2** ```vue [Card.vue] ``` ```vue [Zone.vue] ``` **v3** ```vue [Card.vue] ``` ```vue [Zone.vue] ``` - La tarjeta recibe `tabindex`, `role` y los atributos `aria-*` por sí sola. Un asa `