[rules] drag&drop rules on desktop view

frontend/src/views/Rules.vue

@@ -80,6 +80,12 @@
   <v-row>
     <v-col class="v-card-subtitle" cols="12">{{ $t('pages.rules') }}</v-col>
     <v-col cols="12" sm="4" md="3" lg="2" v-for="(item, index) in <any[]>rules"
+        :key="item.id"
+        :draggable="true"
+        @dragstart="onDragStart(index)"
+        @dragover.prevent
+        @drop="onDrop(index)"
+      >
       <v-card rounded="xl" elevation="5" min-width="200" :title="index+1">
         <v-card-subtitle style="margin-top: -20px;">
           <v-row>
@@ -257,4 +263,20 @@ const delRuleset = (index: number) => {
   rulesets.value.splice(index,1)
   delRulesetOverlay.value[index] = false
 }
+
+const draggedItemIndex = ref(null);
+
+const onDragStart = (index: any) => {
+  draggedItemIndex.value = index;
+};
+
+const onDrop = (index: any) => {
+  if (draggedItemIndex.value !== null) {
+    // Swap the dragged item with the dropped one
+    const draggedItem = rules.value[draggedItemIndex.value];
+    rules.value.splice(draggedItemIndex.value, 1);
+    rules.value.splice(index, 0, draggedItem);
+    draggedItemIndex.value = null;
+  }
+};
 </script>