Vue JS：从页面拖动元素以滑出面板

Question

我的主页上有一张带有滑出面板的卡片（或照片）列表，
我试图将卡片从主页拖到滑出面板。
但是我发现，当面板滑出时，我无法控制主页。

我要实现的目标：
1：当用户拖动（按住）卡片时，面板应跳出。
2a：如果用户将卡放到面板上，该卡将添加到面板中并关闭。
2b：如果用户将卡放到面板外，则面板将关闭。

我正在使用VueDraggable：https://github.com/SortableJS/Vue.Draggable
和滑出面板：https://github.com/officert/vue-slideout-panel

我的代码的一部分：

// the main page
// MyPage.vue
<template>
  <div>
    <draggable>
      <div class="cardList" v-for="card in cards" v-on:mousedown="showPanel" >{{card}}<br></div>
    </draggable>
    <br>
    <slideout-panel></slideout-panel>
  </div>

</template>

<script>
  import MyPanel from "@/components/MyPanel";
  import draggable from 'vuedraggable';


  export default {
    name: "MyCard",
    components: {
      draggable,
    },
    data() {
      return {
        cards : ["card1", "card2", "card3", "card4"]
      }
    },
    methods: {
      showPanel() {
        const panel = this.$showPanel({
          component: MyPanel,
          width: "200px",
          cssClass: "panel-1",
          props: {}
        });
      }
    }
  };
</script>

<style scoped>
  ....
</style>


// MyPanel.vue
<template>
  <div>
    <draggable>
      <div class="pokeCard" v-for="card in cards">{{card}}<br></div>
    </draggable>
    <br>
    <button class="btn btn-primary" v-on:click.prevent="closePanel">
      Close Panel
    </button>
  </div>
</template>

<script>
  import draggable from 'vuedraggable';

  export default {
    name: "MyPanel",
    components: {
      draggable
    },
    data() {
      return {
        cards : ["card5", "card6"]
      }
    },
    methods: {
      closePanel() {
        this.$emit("closePanel", {});
      }
    }
  }
</script>

<style scoped>
  .pokeCard {
    border: 1px solid red;
    border-radius: 1px;
    left: 50%;
    alignment: center;
  }
</style>