# Drag and drop entre apps

Ofereça e aceite dados tipados com permissões, validação e uma alternativa programática ao arraste.

Esta página descreve o WU Framework `4.0.0`. Consulte o [guia de migração para Framework 4.0 e CLI 1.2](/pt/docs/guides/releases/) antes de atualizar um projeto existente.

O shell importa `wu-framework/dnd` ao usar core. A app emissora solicita `drag.offer:catalog.product` e a receptora `drag.accept:catalog.product`; o host concede cada permissão à respectiva app. Use `context.wu` no lifecycle para manter a autoridade 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()` e `accept()` retornam promessas de funções de limpeza. Guarde-as na instância e execute-as ao desmontar. Se um efeito puder ser cancelado antes da resolução, execute imediatamente o disposer quando ele chegar a um efeito já cancelado.

`wu.drag.deliver(type, payload, { to, element })` realiza a mesma entrega sem arraste físico: use em ações de teclado ou botão. `current()` retorna a sessão ativa ou `null`. A transferência nativa contém um ID de sessão, não o objeto inteiro; o destino recebe uma cópia após permissões e validação. Isso coordena dados; não move DOM entre apps.

Ofertas aceitam `effect`, `image` e `onEnd`. Destinos aceitam vários tipos, `onEnter`, `onLeave`, `onReject` e `dropEffect`. Trate `WU_CAPABILITY_DENIED`, `WU_DRAG_INVALID`, `WU_DRAG_NO_TARGET` e `WU_DRAG_ACCEPT_DENIED`; atualize o estado de negócio apenas quando `onDrop` confirmar a entrega.

Experimente também [Apps em movimento](/pt/labs/interaction/): editor React, caixa de entrada Vue, janelas e PiP, entrega tipada, transições e keep-alive. O [guia do cenário](/pt/docs/guides/interactive-workspace/) explica como aplicá-lo à sua aplicação.