[feat] added drag-drop polyfill

package.json

@@ -26,6 +26,7 @@
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "lucide-svelte": "^0.130.0",
+    "mobile-drag-drop": "3.0.0-rc.0",
     "pako": "^2.1.0",
     "png-chunk-text": "^1.0.0",
     "png-chunks-encode": "^1.0.0",

pnpm-lock.yaml

@@ -30,6 +30,7 @@ specifiers:
   localforage: ^1.10.0
   lodash: ^4.17.21
   lucide-svelte: ^0.130.0
+  mobile-drag-drop: 3.0.0-rc.0
   pako: ^2.1.0
   png-chunk-text: ^1.0.0
   png-chunks-encode: ^1.0.0
@@ -65,6 +66,7 @@ dependencies:
   localforage: 1.10.0
   lodash: 4.17.21
   lucide-svelte: 0.130.0_svelte@3.58.0
+  mobile-drag-drop: 3.0.0-rc.0
   pako: 2.1.0
   png-chunk-text: 1.0.0
   png-chunks-encode: 1.0.0
@@ -1493,6 +1495,10 @@ packages:
       minimist: 1.2.8
     dev: true
 
+  /mobile-drag-drop/3.0.0-rc.0:
+    resolution: {integrity: sha512-f8wIDTbBYLBW/+5sei1cqUE+StyDpf/LP+FRZELlVX6tmOOmELk84r3wh1z3woxCB9G5octhF06K5COvFjGgqg==}
+    dev: false
+
   /mri/1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}

src/lib/SideBars/Sidebar.svelte

@@ -304,7 +304,7 @@
     if(da.type === "risuDrag"){
       inserter(da.index,{index:0})
     }
-  }} />
+  }} on:dragenter|preventDefault />
   {#if menuMode === 0}
     {#each charImages as char, ind}
       <div class="group relative flex items-center px-2"
@@ -312,6 +312,7 @@
         on:dragstart={(e) => {avatarDragStart({index:ind}, e)}}
         on:dragover={avatarDragOver}
         on:drop={(e) => {avatarDrop({index:ind}, e)}}
+        on:dragenter|preventDefault
       >
         <SidebarIndicator
           isActive={char.type === 'normal' && $selectedCharID === char.index && sideBarMode !== 1}
@@ -372,13 +373,14 @@
             if(da.type === "risuDrag", char.type === 'folder'){
               inserter(da.index,{index:0,folder:char.id})
             }
-          }} />
+          }} on:dragenter|preventDefault/>
           {#each char.folder as char2, ind}
               <div class="group relative flex items-center px-2 z-10"
               draggable="true"
               on:dragstart={(e) => {if(char.type === 'folder'){avatarDragStart({index: ind, folder:char.id}, e)}}}
               on:dragover={avatarDragOver}
               on:drop={(e) => {if(char.type === 'folder'){avatarDrop({index: ind, folder:char.id}, e)}}}
+              on:dragenter|preventDefault
             >
               <SidebarIndicator
                 isActive={$selectedCharID === char2.index && sideBarMode !== 1}
@@ -415,7 +417,7 @@
               if(da.type === "risuDrag" && char.type === 'folder'){
                 inserter(da.index,{index:ind+1,folder:char.id})
               }
-            }} />
+            }} on:dragenter|preventDefault/>
           {/each}
         </div>
       {/if}
@@ -432,7 +434,7 @@
         if(da.type === "risuDrag"){
           inserter(da.index,{index:ind+1})
         }
-      }} />
+      }} on:dragenter|preventDefault />
     {/each}
     <div class="flex flex-col items-center space-y-2 px-2">
       <BaseRoundedButton

src/main.ts

@@ -5,6 +5,7 @@ import { loadData } from "./ts/globalApi";
 import { ReadableStream, WritableStream, TransformStream } from "web-streams-polyfill/ponyfill/es2018";
 import { Buffer as BufferPolyfill } from 'buffer'
 import { initHotkey } from "./ts/hotkey";
+import {polyfill} from "mobile-drag-drop";
 
 //Polyfills
 declare var Buffer: typeof BufferPolyfill;
@@ -13,6 +14,7 @@ globalThis.Buffer = BufferPolyfill
 globalThis.WritableStream = globalThis.WritableStream ?? WritableStream
 globalThis.ReadableStream = globalThis.ReadableStream ?? ReadableStream
 globalThis.TransformStream = globalThis.TransformStream ?? TransformStream
+polyfill()
 
 const app = new App({
   target: document.getElementById("app"),