:class="[borderhover ? 'draggle-area-active' : '', 'draggle-area']"
id="draggle-area"
>
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: {}
};
.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;
}