一、先安装插件 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>