🐛 switch to sortablejs-vue3 as it is more actively maintained to … (#78)

* 🐛 switch to sortablejs-vue3 as it is more actively maintained to try and fix rendering issues of checklist when deployed

* 🐛 fix format

--------

Author: FabianWilms

personalization-webcomponents/package-lock.json

@@ -20,7 +20,8 @@
     "@muenchen/muc-patternlab-vue": "5.6.0",
     "@vueuse/core": "13.6.0",
     "vue": "3.5.18",
-    "vuedraggable": "4.1.0"
+    "sortablejs": "^1.15.6",
+    "sortablejs-vue3": "^1.3.0"
   },
   "devDependencies": {
     "@cyclonedx/cyclonedx-npm": "4.0.0",

personalization-webcomponents/package.json

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
-    <draggable
-      v-model="list"
+    <sortable
+      :list="list"
       tag="ul"
       class="list"
       :animation="200"
@@ -25,13 +25,13 @@
             :disabled="disabled"
             @change="() => onSelectChange(element.serviceID)"
           />
-          <label
+          <span
             class="label-text"
             @click.prevent="openDialog(element)"
             style="cursor: pointer"
           >
             <b>{{ element.title }}</b>
-          </label>
+          </span>
 
           <!-- Drag-Handle Icon -->
           <span
@@ -43,7 +43,7 @@
           </span>
         </li>
       </template>
-    </draggable>
+    </sortable>
 
     <!--todo-->
     <!-- Placeholder simple dialog box (modal)-->
@@ -65,8 +65,8 @@
 import type DummyChecklistItem from "@/api/dummyservice/DummyChecklistItem.ts";
 
 import { MucIcon } from "@muenchen/muc-patternlab-vue";
+import { Sortable } from "sortablejs-vue3";
 import { defineEmits, ref, watch } from "vue";
-import draggable from "vuedraggable";
 
 const props = withDefaults(
   defineProps<{