一、效果展示

二、代码分析

主页面代码：

<template>
  <div class="board">
    <div class="left">
      <CoursePerson
        v-for="({ name }, k) in datas.courses"
        :key="k"
        :courseName="name"
        :courseKey="k"
        @handleDragEnd="handleDragEnd"
      ></CoursePerson>
    </div>
    <div class="right" @dragover="handleDragOver" @dragenter="handleDragEnter">
      <table border="1">
        <tr>
          <th>时间段 / 星期</th>
          <th v-for="(w, i) in datas.weekday" :key="i">{{ w }}</th>
        </tr>
        <tr v-for="(t, i) in datas.time_slot" :key="i">
          <th>{{ t }}</th>
          <td v-for="n in 7" :key="n" :data-weekday="n" :data-time-slot="i">
            <template v-if="cellData[`${n}-${i}`]">
              <CoursePerson
                :courseName="datas.courses[cellData[`${n}-${i}`]].name"
                :courseKey="cellData[`${n}-${i}`]"
                v-CoursePanel="{ cellData, n, timeSlot: i }"
              ></CoursePerson>
            </template>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import CoursePerson from "@/components/CoursePerson.vue";
export default {
  components: {
    CoursePerson,
  },
  directives: {
    // 定义名为CoursePanel的指令，指向一个配置对象
    CoursePanel: {
      bind(el, bindings) {
        const oRemoveBtn = el.querySelector(".remove-btn");
        const { cellData, n, timeSlot } = bindings.value;
        oRemoveBtn.addEventListener("click", handleRemovePanel, false);
        function handleRemovePanel() {
          delete cellData[`${n}-${timeSlot}`];
        }
      },
    },
  },
  data() {
    return {
      datas: {
        weekday: [
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
          "星期日",
        ],
        time_slot: [
          "08:00-08:50",
          "09:00-09:50",
          "10:00-10:50",
          "11:00-11:50",
          "14:00-14:50",
          "15:00-15:50",
          "16:00-16:50",
          "17:00-17:50",
        ],
        courses: {
          chinese: {
            name: "语文",
            teachers: ["张三", "李四"],
          },
          math: {
            name: "数学",
            teachers: ["张二", "李五"],
          },
          english: {
            name: "英语",
            teachers: ["张3", "李2"],
          },
        },
      },
      cellData: {
        "1-1": "chinese",
        "2-5": "math",
        "3-3": "english",
      },
      targetCell: null,
    };
  },
  methods: {
    handleDragOver(e) {
      e.preventDefault();
    },
    handleDragEnter(e) {
      e.preventDefault();
      const tar = e.target;
      const tagName = tar.tagName.toLowerCase();
      this.targetCell = tagName != "td" ? null : tar;
    },
    handleDragEnd(e) {
      if (this.targetCell) {
        const weekday = this.targetCell.dataset.weekday;
        const timeSlot = this.targetCell.dataset.timeSlot;
        const prop = `${weekday}-${timeSlot}`;
        if (!this.cellData[prop]) {
          //给表格中没有坐标的课程
          const key = e.dataset.key;
          this.$set(this.cellData, prop, key); //借助$set赋值，更新视图
          // this.cellData[prop] = key; //赋值(vue2赋值视图不更新)
        }
      }
    },
  },
};
</script>

<style lang='less' scoped>
.board {
  position: relative;
  .left {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
  }
  .right {
    width: 100%;
    height: 800px;
    padding-left: 300px;
    box-sizing: border-box;
    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      td {
        height: 60px;
        text-align: center;
      }
    }
  }
}
</style>

卡片组件代码：

<template>
  <!-- draggable="true"  该盒子可被拖动 -->
  <div
    class="course-panel"
    draggable="true"
    @dragstart="handleDragStart"
    @dragend="handleDragEnd"
    :data-key="courseKey"
  >
    <h1>{{ courseName }}</h1>
    <span class="remove-btn">x</span>
  </div>
</template>

<script>
export default {
  props: ["courseName", "courseKey"],
  methods: {
    handleDragStart(e) {
      const tar = e.target;
      tar.style.opacity = ".6";
    },
    handleDragEnd(e) {
      const tar = e.target;
      tar.style.opacity = "1";
      this.$emit("handleDragEnd", tar);
    },
  },
};
</script>

<style lang='less' scoped>
.course-panel {
  position: relative;
  width: 100px;
  height: 60px;
  background-color: goldenrod;
  margin: 10px auto;
  padding: 10px;
  box-sizing: border-box;
  cursor: move;
  h1 {
    font-size: 20px;
    text-align: center;
  }
  .remove-btn {
    position: absolute;
    top: 0px;
    right: 10px;
  }
}
</style>

2.1、表格编写与课程卡片

静态页面主要采用两栏布局。左侧为卡片组件，右侧为表格。

2.2、初始化数据与渲染

td是单元格，现在里面是一个7X7的表格，想要将指定课程的卡片渲染上去，我们可以借助cellData变量里的值，类似二维数组，我们找到坐标，就可以渲染上去。

2.3、拖拽卡片到表格，进行插入

拖拽效果：draggable="true" 意味着该盒子可被拖动，包括很多事件，比如：dragstart、dragend、dragover、dragenter等。

插入实现：看似是将左侧的卡片拖进去，实则是在进入表格时（拖拽结束）进行了数据的改动，就是给cellData这个对象里继续增加一个属性和属性值，达到插入效果。vue2里直接复制，视图不会变化，可以通过$set进行视图更新，this.$set(this.cellData, prop, key);