模拟实际项目需求，使用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的拖拽功能实现任务拖拽保存

凌云魅影

引用和评论

使用echarts画出行政图例子

2025年最新反编译微信小程序的教程及工具

手写一个动态海洋和天空效果的vue hooks

你可能不知道的图片加载相关知识

原生JS大揭秘—JS代码执行原理解刨

使用CSS给标题添加书名号并超出省略

原生electron起步-从零到一完成构建和打包