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

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

先看效果图

上代码

<template>
  <div class="all">
    <div class="layout top">
      <!-- 显示 -->
      <draggable
        v-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">
        <!-- 显示 -->
        <draggable
          v-model="emptyGroups"
          group="B"
          filter="#emptySquare,#emptyCircle,#emptyParallelogram"
          :forceFallback="true"
          animation="1000"
        >
          <div
            class="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>