From 167e08878df186be425d4b53c7687ec3b2651efe Mon Sep 17 00:00:00 2001
From: Hykilpikonna <me@hydev.org>
Date: Fri, 10 Dec 2021 23:43:51 -0500
Subject: [PATCH] [+] Test dragEnter and dragOver

---
 src/views/color/ColorPicker.vue | 34 ++++++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/views/color/ColorPicker.vue b/src/views/color/ColorPicker.vue
index fc59a63..c596e06 100644
--- a/src/views/color/ColorPicker.vue
+++ b/src/views/color/ColorPicker.vue
@@ -9,7 +9,9 @@
         <div id="palette">
             <div class="row" v-for="(p, i) of palette" :key="i">
                 <div class="color" v-for="(c, j) in p" :key="j" :style="{'background-color': c ? c : '#333'}"
-                     @click="setPalette(i, j)"/>
+                     @click="setPalette(i, j)" @contextmenu="(e) => removePalette(e, i, j)"
+                     draggable="true" @drop="(e) => dropPalette(e, i, j)"
+                     @dragenter="(e) => paletteDragEnter(e, i, j)" @dragover="(e) => paletteDragOver(e, i, j)"/>
             </div>
         </div>
     </div>
@@ -50,6 +52,36 @@ export default class MyColorPicker extends Vue
     {
         this.palette[i][j] = this.colorModel
     }
+
+    removePalette(e: Event, i: number, j: number): void
+    {
+        e.preventDefault()
+        this.palette[i][j] = ''
+    }
+
+    dropPalette(e: DragEvent, i: number, j: number): void
+    {
+        console.log('Drop')
+        console.log(e)
+        console.log('' + i + ' ' + j)
+        return
+    }
+
+    paletteDragEnter(e: DragEvent, i: number, j: number): void
+    {
+        console.log('Drag enter')
+        console.log(e)
+        console.log('' + i + ' ' + j)
+        return
+    }
+
+    paletteDragOver(e: DragEvent, i: number, j: number): void
+    {
+        console.log('Drag over')
+        console.log(e)
+        console.log('' + i + ' ' + j)
+        return
+    }
 }
 </script>