Drag and drop entre apps

Esta página descreve o WU Framework 4.0.0. Consulte o guia de migração para Framework 4.0 e CLI 1.2 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.

// 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() 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: editor React, caixa de entrada Vue, janelas e PiP, entrega tipada, transições e keep-alive. O guia do cenário explica como aplicá-lo à sua aplicação.