ayanova/src/components/attachment-control.vue

@@ -1,11 +1,5 @@
 <template>
-  <div
+  <div class="mt-6" v-resize="onResize">
-    class="mt-6"
-    v-resize="onResize"
-    v-cloak
-    @drop.prevent="onDrop"
-    @dragover.prevent
-  >
     <div>
       <v-btn depressed tile @click="revealedClicked">
         {{ $ay.t("Attachments")
@@ -52,7 +46,14 @@
             <v-tab key="attach"><v-icon>fa-paperclip</v-icon></v-tab>
             <v-tabs-items v-model="tab">
               <v-tab-item key="list">
-                <div class="mt-4" :style="cardTextStyle()">
+                <div
+                  v-cloak
+                  @drop.prevent="onDrop"
+                  @dragover.prevent="onDragOver"
+                  @dragleave="onDragEnd"
+                  class="mt-4"
+                  :style="cardTextStyle()"
+                >
                   <v-list color="grey lighten-5" three-line>
                     <v-list-item
                       v-for="item in displayList"
@@ -356,12 +357,19 @@ export default {
         });
     },
     onDrop(ev) {
+      ev.target.style.border = "none";
       //handle file drop
       var files = Array.from(ev.dataTransfer.files);
       if (files.length > 0) {
         this.uploadFiles = files;
         this.upload();
       }
+    },
+    onDragOver(ev) {
+    ev.target.style.border = "2px dashed #ff0000"
+    },
+    onDragEnd(ev) {
+    ev.target.style.border = "none";
     }
     //-----
   }