跨应用拖放

本页介绍 WU Framework 4.0.0。升级现有项目之前，请阅读 Framework 4.0 与 CLI 1.2 迁移指南。

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

// 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.

// 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 确认投递后更新业务状态。

也可以体验移动中的应用：React 编辑器、Vue 收件箱、窗口与 PiP、类型化传递、过渡和 keep-alive。场景指南介绍了如何将其用于你的应用。