version 0.1

1 files changed, 13 insertions, 7 deletions

diff --git a/src/components/CardThumb.svelte b/src/components/CardThumb.svelte
index c2fefc8..4c41f2d 100644
--- a/src/components/CardThumb.svelte
+++ b/src/components/CardThumb.svelte
@@ -1,21 +1,27 @@
-<script lang="ts">
+<script lang="js">
 
-import {setLeftPanelCard} from '../control/left_panel';
+    import {setLeftPanelCard} from '../control/left_panel';
 
-let {id} = $props();
+    let {id, area} = $props();
 
-function onhover() {
-    setLeftPanelCard(id); 
-}
+    function onhover() {
+        setLeftPanelCard(id); 
+    }
+
+    function onDragStart(e) {
+        e.dataTransfer.setData('text', JSON.stringify({id, area}))
+    }
 
 </script>
 
 {#if id}
     <img
+        draggable="true"
         onmouseover={onhover}
         onfocus={onhover}
+        ondragstart={onDragStart}
         height="100%"
-        src="https://cdn.233.momobako.com/ygopro/pics/{id}.jpg!half"
+        src="https://cdn.233.momobako.com/ygopro/pics/{id}.jpg"
         alt="yugioh card {id}"
     />
 {/if}