# 跨应用拖放

通过授权、验证及可编程替代流程提供和接收带类型的数据。

本页介绍 WU Framework `4.0.0`。升级现有项目之前，请阅读 [Framework 4.0 与 CLI 1.2 迁移指南](/zh-cn/docs/guides/releases/)。

使用 core 时，宿主需导入 `wu-framework/dnd`。发送应用请求 `drag.offer:catalog.product`，接收应用请求 `drag.accept:catalog.product`，宿主分别授权。在生命周期内使用 `context.wu`，以保留每个应用的权限边界。

```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()` 和 `accept()` 返回清理函数的 Promise。应在实例中保存并在卸载时调用。如果 effect 可能在 Promise 完成前取消，那么清理函数到达已取消的 effect 时，应立即执行。

`wu.drag.deliver(type, payload, { to, element })` 无需物理拖动即可执行相同投递，可用于键盘或按钮操作。`current()` 返回活动会话或 `null`。原生传输携带会话 ID，而非整个对象；权限和验证通过后，目标才收到副本。这用于协调数据，不会移动应用间的 DOM。

拖动源支持 `effect`、`image` 与 `onEnd`；目标支持多个类型、`onEnter`、`onLeave`、`onReject` 与 `dropEffect`。处理 `WU_CAPABILITY_DENIED`、`WU_DRAG_INVALID`、`WU_DRAG_NO_TARGET` 和 `WU_DRAG_ACCEPT_DENIED`；仅在 `onDrop` 确认投递后更新业务状态。

也可以体验[移动中的应用](/zh-cn/labs/interaction/)：React 编辑器、Vue 收件箱、窗口与 PiP、类型化传递、过渡和 keep-alive。[场景指南](/zh-cn/docs/guides/interactive-workspace/)介绍了如何将其用于你的应用。