Vue的版本双gridstack无法互相拖拽

[zmy-devs]

Vue版本的gridstack如果有两个·独立的GridStack，开启acceptWidgets：true之后可以拖拽，但是松手后item元素就消失了

[zmy-devs]

PixPin_2026-09-03_16-37-44.mp4

[zmy-devs]

<template>
  <div class="demo">
    <section>
      <h2>列表 A</h2>
      <GridStack :options="listA" :components="components" />
    </section>

    <section>
      <h2>列表 B</h2>
      <GridStack :options="listB" :components="components" />
    </section>
  </div>
</template>

<script setup lang="ts">
import {
  GridStack,
  type GridHTMLElement,
  type GridItemHTMLElement,
  type GridStackNode,
  type GridStackOptions,
} from "gridstack/dist/vue";
import Item from "./components/item.vue";
import "gridstack/dist/gridstack.css";

const components = { Item };

const commonOptions: GridStackOptions = {
  column: 3,
  row: 3,
  cellHeight: 70,
  margin: 8,
  acceptWidgets: true,
  disableResize: true,
  float: true,
};

const listA: GridStackOptions = {
  ...commonOptions,
  children: [
    { id: "a1", component: "Item", props: { content: "A-1" } },
    { id: "a2", component: "Item", props: { content: "A-2" } },
    { id: "a3", component: "Item", props: { content: "A-3" } },
  ],
};

const listB: GridStackOptions = {
  ...commonOptions,
  children: [
    { id: "b1", component: "Item", props: { content: "B-1" } },
    { id: "b2", component: "Item", props: { content: "B-2" } },
  ],
};

// GridStack 13.2 的 Vue wrapper 在跨 grid 移动时不会自动转移组件归属。
// 在目标 grid 收到 added 事件后，把 Teleport 的宿主切换到新 grid。
function fixVueOwner(_event: Event, nodes: GridStackNode[]) {
  nodes.forEach(node => {
    if (!node.id || !node.el) return;

    const itemEl = node.el as GridItemHTMLElement;
    const oldHost = itemEl._gridItemRef?.gridComp;
    const newHost = (node.grid?.el as GridHTMLElement | undefined)?._gridComp;

    if (!newHost || oldHost === newHost) return;

    oldHost?.unregisterSyntheticItemId(node.id);
    newHost.registerSyntheticItemId(node.id);
    itemEl._gridItemRef = { id: node.id, gridComp: newHost };
  });
}
</script>

<style scoped>
.demo {
  display: flex;
  gap: 24px;
  max-width: 900px;
  margin: 40px auto;
}

section {
  flex: 1;
  padding: 16px;
  border: 1px solid #ccc;
}

h2 {
  margin: 0 0 12px;
}

@media (max-width: 640px) {
  .demo {
    flex-direction: column;
    margin: 16px;
  }
}
</style>

[zmy-devs]

我的代码里面如果给gridstack都注册一个add事件然后加上fixVueOwner才能正常，但是我觉得不是最佳实例