<template>
<div class="page-draggle">
<div
:class="[borderhover ? 'draggle-area-active' : '', 'draggle-area']"
id="draggle-area"
>
<div v-for="(item, index) in fileName" :key="index">
<div class="content_div">{ { item }}</div>
</div>
<div class="draggle-text">直接拖拽导入</div>
</div>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
borderhover: false,
fileName: []
};
},
components: {},
methods: {
dragenter(e) {
this.borderhover = true;
this.preventDefault(e);
},
dragleave(e) {
this.borderhover = false;
this.preventDefault(e);
},
dragover(e) {
this.borderhover = true;
this.preventDefault(e);
},
enentDrop(e) {
this.borderhover = false;
this.preventDefault(e);
let fileData = e.dataTransfer.files;
this.uploadFile(fileData);
},
preventDefault(e) {
e.stopPropagation();
e.preventDefault(); //必填字段
},
uploadFile(file) {
let datas = new FormData();
datas.append("file", file);
let datas = new FormData();
datas.append("file", file);
for (let index = 0; index < file.length; index++) {
const element = file[index];
this.fileName.push(element['name'])
}
}
},
created() {},
mounted() {
// 1.文件第一次进入拖动区时，触发 dragenter 事件
// 2.文件在拖动区来回拖拽时，不断触发 dragover 事件
// 3.文件已经在拖动区，并松开鼠标时，触发 drop 事件
// 4.文件在拖动区来回拖拽时，不断触发dragleave 事件
var dropbox = document.getElementById("draggle-area");
console.log("22222", dropbox);
dropbox.addEventListener("drop", this.enentDrop, false);
dropbox.addEventListener("dragleave", this.dragleave, false);
dropbox.addEventListener("dragenter", this.dragenter, false);
dropbox.addEventListener("dragover", this.dragover, false);
},
computed: {}
};
</script>
<style scoped>
.page-draggle {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
#draggle-area {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
height: 200px;
border: 1px solid black;
}
.content_div {
margin-left: 20px;
width: 200px;
height: 30px;
}
</style>