<!–
- @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>
发表回复