模拟实际项目需求，使用element的日历组件配合h5的拖拽功能实现任务拖拽保存
Posted 凌云魅影
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模拟实际项目需求，使用element的日历组件配合h5的拖拽功能实现任务拖拽保存相关的知识，希望对你有一定的参考价值。
<!--
- @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>
以上是关于模拟实际项目需求，使用element的日历组件配合h5的拖拽功能实现任务拖拽保存的主要内容，如果未能解决你的问题，请参考以下文章
vue+element-ui+slot-scope或原生实现可编辑表格(日历)
vue日历背景图/calendar,elementui中 el-calendar自定义日历背景颜色