Vue.js 将可拖动的卡片拖到另一个分区后进行排序

我有左右两个板分区，左侧是可拖动和可排序的工作，但在我将卡放到右侧板上后，可排序功能结束：（很遗憾）

我查看了文档，发现了这个示例：但无法使其工作，我尝试将其应用于电路板和卡组件

我有一个父组件和两个子组件这是我的代码：

app.vue：

<template>
  <div id="app">
    <h2 class="headcomname">Reports Builder</h2>
    <br><br>
     <main class="flexbox">
       <div class="left-side">
         <h2 > Report content </h2>
    <Board id="board-2">
      <h2> Articles </h2>
      <draggable v-model="posts" ghost-class="ghost" class="list-group" array="posts" group="a" @start="drag=true">
 <div class="card-master">
<card v-for="element in posts":id="element.id" :key="element.id" draggable="true" class="list-group-item">
            <h3> {{ element.title }} </h3>
            <p> {{ element.created_at}} {{element.author.name}} </p>
</card>
</div>
      </draggable>
    </Board>
      <draggable :sort="false" ghost-class="ghost" @start="drag=true">
          <div
          class="card-master"
          :id="post.id"
          v-for="(post,index) in posts"
          :key="post.id">
            <card :id="post.id" draggable="true">
              <h3> {{ post.title }} </h3>
              <p> {{ post.created_at}} {{post.author.name}} </p>
            </card>
          </div>
      </draggable>
    </Board>
   <!--  <Board id="board-3">
     <h2> Illustrations  </h2>
       <draggable ghost-class="ghost" @start="drag=true" >
      <slot name="illustrations"></slot>
      </draggable>
    </board> -->
    <!--   <Board id="board-4">
        <h2> Company Info  </h2>
          <draggable ghost-class="ghost" @start="drag=true" >
         <slot></slot>
         </draggable>
      </board> -->
  </div>
  <div class="right-side">
        <h2> Your Report </h2>
      <Board v-show="!this.$root.showModal" id="board-3" >
        <div class="builder-btns">
<a href="/" v-show="!this.$root.showModal" v-on:click="setshowModal() class="gardient-button b-lr-s">
  <span class="mdi mdi-file-eye"></span>
  View
</a>
<a href="/" class="gardient-button b-lr-s">
  <span class="mdi mdi-save"></span>
  Save
</a>
<a href="/" class="gardient-button b-lr-s">
  <span class="mdi mdi-pdf"></span>
  Print
</a>
</div>
      </Board>
</div>
  </main>
  </div>
</template>

<script>
import Vue from 'vue/dist/vue.esm'
import Board from './components/Board';
import Card from './components/Card';
import draggable from 'vuedraggable';
import modal from './components/Modal.vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);
export default {
  name: 'app',
  components: {
  Board,
   Card,
   draggable,

 },
 props: ["posts","items"],
 methods: {
    setshowModal()  {
    switch (this.$root.showModal) {
         case false:
        this.$root.showModal= true;
        break;
        case true:
        this.$root.showModal= false;
        break;
      }
    },
   },

}
</script>

报表生成器



报告内容
文章
{{element.title}
{{element.created{u at}{{element.author.name}

{{post.title}}
{{post.created_at}{{{post.author.name}

你的报告
从“Vue/dist/Vue.esm”导入Vue
从“./组件/板”导入板；
从“./组件/卡”导入卡；
从“vuedraggable”导入可拖动文件；
从“./components/modal.vue”导入模态；
从“Vuetify”导入Vuetify；
Vue.use（Vuetify）；
导出默认值{
名称：“应用程序”，
组成部分：{
董事会，
卡片
拖拉的，
},
道具：[“帖子”、“物品”]，
方法：{
setshowModal（）{
开关（此.$root.showmodel）{
案例错误：
这是。$root.showmodel=true；
打破
大小写正确：
这是.$root.showmodel=false；
打破
}
},
},
}

Board.vue：

<template>
<div
  :id="id"
  class="board"
  @dragover.prevent
  @drop.prevent="drop"
  >

<slot />
</div>
</template>

<script>


export default {
   props: ['id'],
   methods: {
     drop: e => {

       const card_id = e.dataTransfer.getData('card_id');
       const card = document.getElementById(card_id);
       card.style.display = "block";
       e.target.appendChild(card);
     }
   }
}
</script>

导出默认值{
道具：['id']，
方法：{
drop:e=>{
const card_id=e.dataTransfer.getData（'card_id'）；
const card=document.getElementById（卡片id）；
card.style.display=“block”；
e、 目标儿童（卡片）；
}
}
}

card.vue

<template>
  <div
    :id="id"
    class="card"
    :draggable="draggable"
    @dragstart="dragStart"
    @dragover.stop
    :sort="false"
    ghost-class="ghost"
  >
    <slot/>
  </div>
</template>


<script>

 export default {
    props: ['id', 'draggable'],
    methods: {
      dragStart: e => {
        const target = e.target;

        e.dataTransfer.setData('card_id', target.id);
//if we want cards to not disapear when hold comment line 23 24 25
        setTimeout (() => {
          target.style.display = "none";
        }, 0);
      }
    }
 }
</script>

导出默认值{
道具：['id'，'draggable']，
方法：{
dragStart:e=>{
const target=e.target；
e、 dataTransfer.setData（'card_id'，target.id）；
//如果我们希望卡在保留注释行23 24 25时不消失
设置超时（（）=>{
target.style.display=“无”；
}, 0);
}
}
}

我可以为解决方案付20美元的小费！给贝宝：）谢谢