拖拽上传 drag
触发拖拽的div(范围)
<div id="picDragDropArea" class="picDragDropArea" :style="{'background-color': (dragHover ? 'rgba(32,59,255,0.06)':'#FFFFFF')}"></div>
拖拽上传 js
拖拽文件首次进入 #picDragDropArea，触发dragenter事件
在#picDragDropArea 来回拖拽时 触发 dragleave 事件
拖拽文件已经在 #picDragDropArea ，松开鼠标时，触发drop事件
handleDragDrop(){
let _this = this;
var dropbox = document.getElementById('picDragDropArea');
//触发拖拽
dropbox.addEventListener("drop", handleDragDrop1(), false)
dropbox.addEventListener("dragleave", function(e) {
e.stopPropagation();
e.preventDefault();
console.log('dragleavedragleave');
_this.dragHover = false;
})
dropbox.addEventListener("dragenter", function(e) {
e.stopPropagation();
e.preventDefault();
console.log('dragenterdragenter');
_this.dragHover = true;
})
dropbox.addEventListener("dragover", function(e) {
e.stopPropagation();
e.preventDefault();
console.log('dragoverdragover');
_this.dragHover = true
})
};
handleDragDrop1(e) {
console.log(e,'拖拽事件');
e.stopPropagation();
e.preventDefault(); //必填字段
let files = e.dataTransfer.files;
console.log(files,'拖拽的文件‘)
}
