vue2实现托拉拽课表

一、先安装插件 draggable

二、进行全局注册 在main.js

import draggable from 'vuedraggable';

Vue.component("draggable", draggable);

效果图

<template>
  <div class="content">
    <div class="courseInfo">

      <el-card :style="`min-height: ${minHeight}px;`" class="mt50">
        <el-row type="flex" justify="space-between">
          <el-col :md="4" :sm="4" :xs="4" :span="4">
            <el-tabs default-active-key="activetab" tab-position="left" @tab-click="tabChange">
              <el-tab-pane v-for="(item, index) in list" :key="index" :label="item[0].name">
                <draggable class="dragArea list-group" :list="listDate" :group="{
                  name: 'people',
                  pull: 'clone',
                  put: false,
                  animation: '300',
                }" @end="onEnd">
                  <transition-group>
                    <div class="el-row" v-for="element in listDate" :key="element.id">
                      <p>{{ element.name }}</p>
                      <p>{{ element.teacher }}</p>
                    </div>
                  </transition-group>
                </draggable>
              </el-tab-pane>
            </el-tabs></el-col>
          <!-- <el-col :md="2" :sm="4" :xs="4" :span="2"></el-col> -->
          <el-col :md="16" :sm="24" :xs="24" :span="16">
            <div class="course">
              <table>
                <thead>
                  <tr>
                    <th colspan="2"></th>
                    <th v-for="(val, weekindex) in weeks" :key="weekindex">
                      {{ val }}
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="index of 11" :key="index">
                    <td class="week-td" rowspan="4" v-if="index == 1">上午</td>
                    <td class="week-td" rowspan="4" v-if="index == 5">下午</td>
                    <td class="week-td" rowspan="3" v-if="index == 9">晚上</td>
                    <td class="week-td">{{ index }}</td>
                    <draggable group="people" v-for="(val, weekindex) in weeks" :key="weekindex" :dataindex="index"
                      :week="val" tag="td">
                    </draggable>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>



export default {
  
  data() {
    return {
      minHeight: window.innerHeight - 224,
      list: [
        [
          { name: '历史', id: 1, teacher: '孙老师1' },
          { name: '历史', id: 2, teacher: '孙老师2' },
          { name: '历史', id: 3, teacher: '孙老师3' },
          { name: '历史', id: 4, teacher: '孙老师4' },
        ],
        [
          { name: '生物', id: 1, teacher: '王老师1' },
          { name: '生物', id: 2, teacher: '王老师2' },
          { name: '生物', id: 3, teacher: '王老师3' },
          { name: '生物', id: 4, teacher: '王老师4' },
        ],
        [
          { name: '化学', id: 1, teacher: '赵老师1' },
          { name: '化学', id: 2, teacher: '赵老师2' },
          { name: '化学', id: 3, teacher: '赵老师3' },
          { name: '化学', id: 4, teacher: '赵老师4' },
        ],
        [
          { name: '音乐', id: 1, teacher: '钱老师1' },
          { name: '音乐', id: 2, teacher: '钱老师2' },
          { name: '音乐', id: 3, teacher: '钱老师3' },
          { name: '音乐', id: 4, teacher: '钱老师4' },
        ],
      ],
      weeks: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      listDate: [],
      activetab:0
    };
  },
  created() {

  },
  mounted() {
    this.listDate = this.list[this.activetab];
  },
  methods: {
    onEnd(e) {
      this.weekIndex = e.to.cellIndex;
      this.courseIndex = e.to.__vue__.$vnode.data.attrs.dataindex;
      e.to.innerHTML = e.clone.outerHTML;
      let arr = {
        courseindex: this.courseIndex,
        weekindex: this.weekindex,
        course: e.clone.childNodes[0].innerText,
        teacher: e.clone.childNodes[1].innerText,
      };
      this.$set(this.tableDate[this.weekIndex - 1], this.courseIndex - 1, arr);
    },
    tabChange(key) {
      this.activetab = key.index;
      this.listDate = this.list[key.index];
      console.log(key.index);
    },
  }

};
</script>

<style lang="less" scoped>
.course {
  // height: 700px;
  overflow-y: auto;
  overflow-x: hidden;
  table {
    border: 1px solid #ebebeb;
    // margin: 20px auto;
    text-align: center;
    border-collapse: collapse;
  }
  .week-td {
    background-color: #f7f7f7;
  }
  table th {
    border: 1px solid #ebebeb;
    background-color: #f7f7f7;
    padding: 10px;
    width: 100px;
    height: 40px;
    font-size: 14px;
  }
  table td {
    border: 1px solid #ebebeb;
    padding: 4px 10px;
    height: 40px;
    color: #000000;
    font-size: 14px;
  }
}
.el-row:hover{
  
cursor:pointer
}
.courseInfo {
  margin-top: 10px;

  /deep/ .Courses-leftHand {
    border-right: 1px solid #e0e0e0;
  }

  /deep/ .Courses-content>ul {
    box-sizing: border-box;
    border-bottom: 1px dashed rgb(219, 219, 219);
  }

  /deep/ .Courses-head,
  /deep/ .left-hand-TextDom {
    background-color: #f2f6f7;
  }

  /deep/ .Courses-leftHand>div {
    border-bottom: 1px dashed rgb(219, 219, 219);
    line-height: 200px;
    text-align: center;
    color: #fff;
  }

  /deep/ .Courses-leftHand .left-hand-3 {
    line-height: 100px;
  }

  /deep/ .stage_1,
  /deep/ .left-hand-1 {
    background: #ff6666 !important;
  }

  /deep/ .stage_2,
  /deep/ .left-hand-2 {
    background: #3399cc !important;
  }

  /deep/ .stage_3,
  /deep/ .left-hand-3 {
    background: #66cccc !important;
  }

  /deep/ li {
    line-height: 50px;
    text-align: center;
    color: #fff;
    cursor: pointer;
  }

  /deep/ .highlight-week {
    color: #02a9f5;
  }

  /deep/ .Courses-head {
    text-align: center;
    line-height: 30px;
  }

}
</style>