拖拽上传 drag vue

拖拽上传 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,'拖拽的文件‘)
}