<!--
- @Description: 简化版的理论我的项目，模仿在element日历组件上拖拽工作
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><title>Document</title></head>
<body>
<div id="app">
<el-calendar> <template slot="dateCell" slot-scope="{date, data}"> <div style="height:100%;width:100%" @dragenter="dragenter" @drop="drop(data)" @dragover="dragover" @dragleave="dragleave" > <p v-for="(item,index) in array[data.day.split('-').join('-')]" style="width:80%" draggable="true" @dragstart="dragstart(data,index)" @dragend="dragend" >{{item.name}} </p> </div> </template></el-calendar></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
var app = new Vue({ el: '#app', data: { array:{ '2021-04-05':[ {name:'工作一'},{name:'工作二'} ], '2021-04-06':[ {name:'工作三'},{name:'工作四'} ], '2021-04-07':[ {name:'工作五'},{name:'工作六'} ], '2021-04-08':[ ] }, sourceElement:'', targetElement:'', index:'' }, methods: { dragstart(source,index){ console.log(source,'dragstart') this.sourceElement=source.day; this.index=index; }, dragend(source){ console.log(source,'dragend') }, dragenter(target){ console.log(target,'dragenter') }, dragleave(source){ console.log(source,'dragleave') }, dragover(target){ //须要阻止默认行为，不然不会触发drop办法 target.preventDefault(); }, drop(target){ console.log(target,'drop'); this.targetElement=target.day; if(this.targetElement!=this.sourceElement){ if(!this.array[this.targetElement]){ this.$set(this.array,this.targetElement,[]) }; //先在源数组革除该元素 let arr=JSON.stringify(this.array[this.sourceElement][this.index]); this.array[this.sourceElement].splice(this.index,1); //在指标数组增加该元素 this.array[this.targetElement].push(JSON.parse(arr)); //最初调用api保留 } } }})</script>