使副本成为拖放组件

Question

目前我有两块板和一张卡。我可以将卡片从一个拖到另一个，反之亦然。

现在，当我拖动而不是移动实际的卡片时，我正在尝试制作卡片的副本。

要拖拽东西的主板：

<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>

我从中拖拽东西的餐具柜：

<template>
    <div
        :id="id"
        class="test"
        @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);
        }
    },
    data(){
        return{
            title:'test'
        }
    }
} 
</script>

卡片：

<template>
    <div 
        :id="id"
        class="card"
        :draggable="draggable"
        @dragstart="dragStart"
        @dragover.stop
    >
      <div class="test2">
          <i class="icon-text-width"></i>  Object
      </div>
    </div>
</template>

<script>
export default{
    props:['id','draggable'],
    methods: {
        dragStart: e => {
            const target = e.target;
            
            e.dataTransfer.setData('card_id', target.id)

            setTimeout(() => {
                target.style.display = "none";
            },0)
        }
    },
    data(){
        return{
            test:''
        }
    }
}
</script>

<style >
.test2{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
</style>

the App.Vue

<template>
  <div id="app">
      <main class="flexbox">
          
        <Board id="board-1">
        
        </Board>
        <SideBoard id="board-2" class="test">
            <Card id="card-1" draggable='true'>
                <p>Object Card</p>
            </card>
        </SideBoard>


      </main>
  </div>
</template>

<script>
import Board from './components/Board.vue'
import Card from './components/Card.vue'
import SideBoard from './components/sideBoard.vue'


export default {
  name: 'App',
  data(){
      return{
         
      }
  },
  components: {
      Board,
      Card,
      SideBoard,

  }
}
</script>

Answer 1

在您的CodeSandbox中，当您在侧边栏或电路板中放置一张卡时，您会触发函数drop。在该函数中，您可以访问被拖动的卡。如果我在你的位置，我会把那张卡的html元素发送到app.vue，然后把它放在电路板上。然后放置(在目标中附加卡)我将删除该部分。所以卡片总是并且总是出现在侧边栏中。