如果使用Vue要做根据已有的图形填入到指定的单元格中，你会怎么做？

先看效果图

上代码

<template><div class="all"><div class="layout top"><!-- 显示 --><draggablev-model="groups":forceFallback="true"animation="1000"group="A":sort="false"@start="onStart"@end="onEnd"><div v-for="item in groups" :key="item" :class="item" :id="item"></div></draggable></div><div class="layout bottom"><div class="empty" v-for="item in emptyGroups" :key="item.name"><!-- 显示 --><draggablev-model="emptyGroups"group="B"filter="#emptySquare,#emptyCircle,#emptyParallelogram":forceFallback="true"animation="1000"><divclass="emptyCenter":class="item.flag ? item.choose : ''":id="item.name"><span> {{ item.ch }}</span></div></draggable></div></div></div>
</template><script>
import draggable from "vuedraggable";
export default {components: {draggable: draggable,},data() {return {groups: ["parallelogram", "square", "circle"],emptyGroups: [{name: "emptySquare",flag: false,ch: "正方形",choose: "",},{name: "emptyCircle",flag: false,ch: "圆形",choose: "",},{name: "emptyParallelogram",flag: false,ch: "平行四边形",choose: "",},],};},methods: {changeName(name) {return name.substring(5, 6).toLowerCase() + name.substring(6);},onStart(val) {console.log("kaishi", val);},onEnd(val) {console.log("jieshu", val);let start = val.item.id;let end = val.originalEvent.target.outerHTML;console.log("起点:", start);console.log("终点:", end);let changeEnd = "";this.emptyGroups.forEach((item) => {if (end.indexOf(item.ch) > -1) {changeEnd = item.name;}});this.emptyGroups.forEach((item) => {if (changeEnd.indexOf(item.name) > -1) {item.flag = true;item.choose = start;}});},},
};
</script><style lang="scss">
.all {display: flex;flex-direction: column;justify-content: space-around;width: 1000px !important;height: 1000px !important;border: 1px solid pink;.top > div,.bottom > div {display: flex;justify-content: space-around;width: 100%;}.layout {display: flex;justify-content: space-around;// 正方形.square {width: 150px;height: 150px;background: #8dc5e3;}// 圆形.circle {width: 150px;height: 150px;background: #8dc5e3;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;}// 平行四边形.parallelogram {width: 130px;height: 130px;margin-left: 20px;-webkit-transform: skew(20deg);background: #8dc5e3;span{font-style: italic;}}.empty {width: 200px;height: 200px;border: 1px solid pink;display: flex;justify-content: center;align-items: center;.emptyCenter {display: flex;justify-content: center;align-items: center;}}}
}
</style>