关于html5:模拟实际项目需求使用element的日历组件配合h5的拖拽功能实现任务拖拽保存

42次阅读

共计 1794 个字符，预计需要花费 5 分钟才能阅读完成。

<!–

@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>

正文完