尝试添加原生拖拽

src/views/main_web/workspace/service.js

@@ -1,6 +1,5 @@
 import { fetchApi, wrapErrorHint } from '@/utils/request';
 import { firstCharToLowerCase, firstCharToUpperCase } from '@/utils/tool';
-import { DownloadStatus } from './helper';
 
 
 export async function fetchWorkFlow(projectId, userId) {

src/views/main_web/workspace/workspace.new.vue

@@ -32,6 +32,7 @@
       />
       <div class="layout_content2" v-show="!showWorkline" v-loading="loading">
         <section
+          id="workspace"
           :class="`${closepageH} layerout_H2`"
           @contextmenu.prevent="rightShowMenu($event, '新建文件夹', 4)"
         >
@@ -77,6 +78,7 @@
                       :currentFolder="currentFolder"
                       :localFileHashMap="localFileHashMap"
                       :loadingState="localFileLoadStateMap[file.id]"
+                      @dragstart="onfileDropout(file)"
                     />
                   </div>
                   <draggable
@@ -271,6 +273,7 @@ import { firstCharToLowerCase, firstCharToUpperCase, notify } from '@/utils/tool
 import FileItem from './components/file-item';
 import FolderItem from './components/folder-item';
 import { FileWorkStatus, injectionFileLocalStatus, LoadingEnum } from './helper';
+import { propertyOf } from 'lodash';
 
 const $ = window.jQuery;
 const Velocity = window.Velocity;
@@ -378,6 +381,9 @@ export default {
   mounted: function () {
     window.addEventListener("scroll", this.onscroll, true);
     window.addEventListener("resize", this.listenBottomHeight, true);
+    if(this.isClient) {
+      this.initWorkspaceDropEvent();
+    }
     //添加鼠标移入齿轮事件
     // window.addEventListener("mouseenter", this.setIconMouseEnter, true);
     this.fetchNodeFolders();
@@ -422,6 +428,43 @@ export default {
       return list.indexOf(target) !== -1;
     },
     /* 全局监听事件 */
+    initWorkspaceDropEvent() {
+      const dropbox = document.getElementById('workspace');
+      dropbox.addEventListener('drop', this.fileDropEvent, false);
+      dropbox.addEventListener("dragleave", function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+      });
+      dropbox.addEventListener("dragenter", function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+      });
+      dropbox.addEventListener("dragover", function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+      });
+    },
+    // 从客户端外拖入文件并上传
+    fileDropEvent(e) {
+      // todo
+      const file = propertyOf(e)('dataTransfer.files.0');
+      debugger;
+      if(!file) return;
+      if(!file.type) {
+        notify.error('文件夹或无扩展名文件不能上传');
+        return;
+      }
+      const filePath = file.path;
+      console.log(e);
+      debugger;
+    },
+    // 从文件列表中拖到本地
+    onfileDropout(file) {
+      if(!this.isClient) return;
+      const { ipcRender } = global;
+      console.log(file);
+      ipcRender.send('drag-to-copy-file', '/absolute/path/to/the/item')
+    },
     async intervalTask() {
       await this.fetchFolderFiles();
       this.timerIns = setTimeout(() => { this.intervalTask(); }, 3000);