拖拽修改

app/public/js/stage.js

@@ -2898,6 +2898,21 @@ $(document).ready(() => {
                     $('#upload-img-file').val('');
                 });
             }
+            function dragFile(e) {
+                var file = null,
+                    data = e.dataTransfer.types;
+                for (var i = 0; i < data.length; i += 1) {
+                    if (data[i] === 'Files') {
+                        file = e.dataTransfer.files; //获取文件
+                        break;
+                    }
+                }
+                if (file && file[0].type.indexOf('image') !== -1) {
+                    var formData = new FormData();
+                    formData.append('file', file[0]); //上传单个文件的添加方式
+                    upload(formData); //upload 异步上传
+                }
+            }
             // 移动图片
             const moveImageItem = function (ev) {
                 const item = this;
@@ -2960,29 +2975,22 @@ $(document).ready(() => {
             });
             // 拖拽上传
             //拖拽上传文件
-            const dragbox = document.querySelector('.drag-img');
+            const dragbox = document.querySelector('#upload-img');
             dragbox.addEventListener('dragover', function(e) {
                 e.preventDefault(); // 必须阻止默认事件
             }, false);
             dragbox.addEventListener('drop', function(e) {
                 e.preventDefault(); // 阻止默认事件
-                var file = null,
-                    data = e.dataTransfer.types;
-                for (var i = 0; i < data.length; i += 1) {
-                    if (data[i] === 'Files') {
-                        file = e.dataTransfer.files; //获取文件
-                        break;
-                    }else{
-                        var text = e.dataTransfer.getData('text/plain');
-                        $('.dragFile').append(text); //将拖拽的文字添加到容器里
-                        break;
-                    }
-                }
-                if (file && file[0].type.indexOf('image') !== -1) {
-                    var formData = new FormData();
-                    formData.append('file', file[0]); //上传单个文件的添加方式
-                    upload(formData); //upload 异步上传
-                }
+                dragFile(e);
+            }, false);
+            //拖拽上传文件
+            const dragbox2 = document.querySelector('.img-view');
+            dragbox2.addEventListener('dragover', function(e) {
+                e.preventDefault(); // 必须阻止默认事件
+            }, false);
+            dragbox2.addEventListener('drop', function(e) {
+                e.preventDefault(); // 阻止默认事件
+                dragFile(e);
             }, false);
             // 粘贴上传
             $(".img-view").on('paste', function(ev) {

app/view/stage/modal.ejs

@@ -327,14 +327,14 @@
                     <!--<a href="javascript: void(0);" class="btn btn-outline-primary btn-sm" id="upload-img">上传图片</a>-->
                 <!--</p>-->
                 <input type="file" id="upload-img-file" style="display: none;">
-                <div class="card mb-2 drag-img" id="upload-img">
+                <div class="card mb-2" id="upload-img">
                     <div class="card-body p-1">
                         <div class="text-center"><i class="fa fa-folder-open-o fa-3x"></i></div>
                         <div class="text-center">点击或拖动图片文件到这里进行上传</div>
                         <div class="text-center text-muted">仅支持单个文件上传，可以通过QQ、微信截图粘贴上传</div>
                     </div>
                 </div>
-                <div class="img-view drag-img">
+                <div class="img-view">
                 </div>
                 <div class="mt-2">
                     <textarea id="text-edit" class="form-control form-control-sm" placeholder="草图备注" rows="3">