feat: integrate vuedraggable

package.json

@@ -37,6 +37,7 @@
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.2.2",
     "vue3-photo-preview": "^0.3.0",
+    "vuedraggable": "^4.1.0",
     "xgplayer": "^2.32.3",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz"
   },

src/locales/cn.json

@@ -13,6 +13,7 @@
     "commonXGPlayer": "西瓜播放器",
     "commonTable": "基础表格",
     "commonImagePreview": "图片预览",
+    "commonDraggable": "拖拽组件",
     "commonGuide": "引导页",
     "commonClipboard": "剪贴板",
     "commonDocs": "文档",

src/locales/en.json

@@ -14,6 +14,7 @@
     "commonTable": "Basic Table",
     "commonImagePreview": "Image Preview",
     "commonClipboard": "Clipboard",
+    "commonDraggable": "Draggable",
     "commonGuide": "Introductory Page",
     "commonDocs": "Docs",
     "commonMultilevelMenu": "Multilevel Menu",

src/locales/kr.json

@@ -13,6 +13,7 @@
     "commonXGPlayer": "수박 플레이어",
     "commonTable": "기본 테이블",
     "commonImagePreview": "이미지 미리보기",
+    "commonDraggable": "구성 요소 드래그",
     "commonGuide": "소개 페이지",
     "commonClipboard": "클립보드",
     "commonDocs": "문서",

src/router/modules/constant-routes.ts

@@ -164,6 +164,15 @@ export const CONSTANT_ROUTES: VAdmireRoute[] = [
           icon: 'mdi:clipboard-text',
         },
       },
+      {
+        path: 'draggable',
+        name: 'Feature_Draggable',
+        component: '~/views/features/Draggable.vue',
+        meta: {
+          text: '$t("route.commonDraggable")',
+          icon: 'mdi:drag-variant',
+        },
+      },
       {
         path: '',
         name: 'GuideIndex',

src/views/features/Draggable.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import Draggable from 'vuedraggable'
+
+const drag = ref(false)
+const draggableList = ref([
+  {
+    id: 1,
+    label: 'Item 1',
+  },
+  {
+    id: 2,
+    label: 'Item 2',
+  },
+  {
+    id: 3,
+    label: 'Item 3',
+  },
+  {
+    id: 4,
+    label: 'Item 4',
+  },
+  {
+    id: 5,
+    label: 'Item 5',
+  },
+  {
+    id: 6,
+    label: 'Item 6',
+  },
+  {
+    id: 7,
+    label: 'Item 7',
+  },
+])
+const dragStart = () => {
+  drag.value = true
+}
+const dragEnd = () => {
+  drag.value = false
+  console.log('New draggableList->>>', draggableList.value)
+}
+</script>
+
+<template>
+  <div>
+    <Draggable
+      v-model="draggableList"
+      item-key="id"
+      group="people"
+      @start="dragStart"
+      @end="dragEnd"
+    >
+      <template #item="{element}">
+        <div class="p-4 mb-4 last:mb-0 cursor-grab rounded border border-vBorderLight dark:border-vBorderDark">
+          {{ element.id }} - {{ element.label }}
+        </div>
+      </template>
+    </Draggable>
+  </div>
+</template>