In the Vue version, dragging an item between two GridStacks doesn't work. #3371

Activity

1. zmy-devs commented on Sep 3, 2026

   

   zmy-devs

   on Sep 3, 2026

   Author

   More actions

   PixPin_2026-09-03_16-37-44.mp4
2. zmy-devs commented on Sep 3, 2026

   

   zmy-devs

   on Sep 3, 2026

   Author

   More actions

   <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>
   
3. zmy-devs commented on Sep 3, 2026

   

   zmy-devs

   on Sep 3, 2026

   Author

   More actions

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

   

   adumesny

   on Sep 4, 2026

   Member

   More actions

   @zmy-devs please post all messages in english, or I will close it.
5. adumesny

   added

   status:need more info

   on Sep 4, 2026
6. adumesny

   changed the title [-]Vue的版本双gridstack无法互相拖拽[/-] [+]In the Vue version, dragging an item between two GridStacks doesn't work.[/+] on Sep 9, 2026
7. adumesny

   added a commit that references this issue on Sep 9, 2026

   vue, react: fix item content vanishing when dragging between 2 grids

   ...

   This issue will close once commit 1574bb7 is merged into the 'master' branch.

   1574bb7
8. adumesny

   closed this as completedin #3377on Sep 9, 2026