# Drag and drop entre apps

Ofrece y acepta datos tipados con permisos, validación y una alternativa programática al arrastre.

Esta página describe WU Framework `4.0.0`. Consulta la [migración a Framework 4.0 y CLI 1.2](/es/docs/guides/releases/) antes de actualizar un proyecto existente.

El shell importa `wu-framework/dnd` si usa core. La app emisora solicita `drag.offer:catalog.product` y la receptora `drag.accept:catalog.product`; el host concede ambos permisos a sus respectivas apps. Usa `context.wu` dentro del lifecycle para conservar la autoridad de cada app.

```js
// Inside the sending app's async mount(container, props, context):
const card = document.createElement('button');
card.textContent = 'Product 42';
container.append(card);
const stopOffer = await context.wu.drag.offer(card, {
  type: 'catalog.product', payload: { id: '42', quantity: 1 },
});
// Save stopOffer and call it from this app's unmount.
```

```js
// Inside the receiving app's async mount(container, props, context):
const stopAccept = await context.wu.drop.accept(container, {
  type: 'catalog.product',
  validate(value) {
    if (typeof value?.id !== 'string') throw new TypeError('Product id is required');
    return value;
  },
  onDrop: product => { container.textContent = 'Added: ' + product.id; },
});
// Save stopAccept and call it from this app's unmount.
```

`offer()` y `accept()` devuelven promesas de funciones de limpieza. Conserva esas funciones en la instancia y ejecútalas al desmontar. Si usas efectos que pueden cancelarse antes de que resuelva la promesa, ejecuta inmediatamente el disposer cuando llegue a un efecto ya cancelado.

`wu.drag.deliver(type, payload, { to, element })` ejecuta la misma entrega sin un arrastre físico: úsalo para una acción de teclado o botón. `current()` devuelve la sesión activa o `null`. La transferencia nativa contiene el ID de sesión, no el objeto completo; el destino recibe una copia después de comprobar permisos y validación. Esto coordina datos, no mueve el DOM de una app a otra.

La oferta acepta `effect`, `image` y `onEnd`. El destino acepta varios tipos, `onEnter`, `onLeave`, `onReject` y `dropEffect`. Maneja `WU_CAPABILITY_DENIED`, `WU_DRAG_INVALID`, `WU_DRAG_NO_TARGET` y `WU_DRAG_ACCEPT_DENIED`; no cambies el estado de negocio antes de que `onDrop` confirme la entrega.

Prueba también [Apps en movimiento](/es/labs/interaction/): editor React, bandeja Vue, ventanas y PiP, entrega tipada, transiciones y keep-alive. La [guía del escenario](/es/docs/guides/interactive-workspace/) explica cómo llevarlo a tu aplicación.