Drag and drop entre apps

Esta página describe WU Framework 4.0.0. Consulta la migración a Framework 4.0 y CLI 1.2 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.

// 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() 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: editor React, bandeja Vue, ventanas y PiP, entrega tipada, transiciones y keep-alive. La guía del escenario explica cómo llevarlo a tu aplicación.