将可拖动的卡片拖到另一个div后对其进行排序

Question

我在左侧有2个木板分区，左侧是可拖动和可排序的作品，但在将卡片放到右侧板上后，可排序功能的结尾:(可悲。

我遍历文档并找到了以下示例：https://jsbin.com/visimub/edit?html,js,output，但无法正常工作，我尝试将其应用于电路板和卡组件。

我有1个父组件和2个子组件，这是我的代码：

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>

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>

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>

我可以给小费20美元作为解决方案！到PayPal :)谢谢