refactor: 拖动插件更换为vue-draggable-plus

frontend/package.json

@@ -60,12 +60,12 @@
     "resize-observer-polyfill": "^1.5.1",
     "sortablejs": "^1.15.0",
     "vue": "^3.3.4",
+    "vue-draggable-plus": "^0.2.7",
     "vue-echarts": "^6.6.1",
     "vue-i18n": "^9.3.0",
     "vue-router": "^4.2.4",
     "vue3-ace-editor": "^2.2.3",
-    "vue3-colorpicker": "^2.2.2",
-    "vuedraggable": "^4.1.0"
+    "vue3-colorpicker": "^2.2.2"
   },
   "devDependencies": {
     "@arco-plugins/vite-vue": "^1.4.5",

frontend/src/components/business/ms-batch-form/index.vue

@@ -5,17 +5,19 @@
       :style="{ width: props.formWidth || '100%' }"
     >
       <a-scrollbar class="overflow-y-auto" :style="{ 'max-height': props.maxHeight }">
-        <Draggable
-          tag="div"
+        <VueDraggable
+          v-model="form.list"
           ghost-class="ghost"
           drag-class="dragChosenClass"
           :disabled="!props.isShowDrag"
-          :list="form.list"
-          item-key="dateIndex"
           :force-fallback="true"
         >
-          <template #item="{ element, index }">
-            <div class="draggableElement gap-[8px] py-[6px] pr-[8px]" :class="[props.isShowDrag ? 'cursor-move' : '']">
+          <div
+            v-for="(element, index) in form.list"
+            :key="`${element.filed}${index}`"
+            class="draggableElement gap-[8px] py-[6px] pr-[8px]"
+            :class="[props.isShowDrag ? 'cursor-move' : '']"
+          >
             <div v-if="props.isShowDrag" class="ml-[8px] mr-[8px] pt-[8px]">
               <MsIcon type="icon-icon_drag" class="block text-[16px] text-[var(--color-text-4)]"
             /></div>
@@ -141,8 +143,7 @@
               <icon-minus-circle />
             </div>
           </div>
-          </template>
-        </Draggable>
+        </VueDraggable>
       </a-scrollbar>
       <div v-if="props.formMode === 'create'" class="w-full">
         <a-button class="px-0" type="text" @click="addField">
@@ -166,7 +167,7 @@
 
   import type { FormItemModel, FormMode } from './types';
   import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
-  import Draggable from 'vuedraggable';
+  import { VueDraggable } from 'vue-draggable-plus';
 
   const { t } = useI18n();
 

frontend/src/components/pure/ms-table/columnSelector.vue

@@ -67,17 +67,15 @@
           t('msTable.columnSetting.nonSort')
         }}</span></a-divider
       >
-      <Draggable tag="div" :list="couldSortColumn" ghost-class="ghost" item-key="dateIndex" @change="handleDragChange">
-        <template #item="{ element }">
-          <div class="column-drag-item">
+      <VueDraggable v-model="couldSortColumn" ghost-class="ghost">
+        <div v-for="element in couldSortColumn" :key="element.dataIndex" class="column-drag-item">
           <div class="flex w-[90%] items-center">
             <MsIcon type="icon-icon_drag" class="text-[16px] text-[var(--color-text-4)]" />
             <span class="ml-[8px]">{{ t(element.title as string) }}</span>
           </div>
-            <a-switch v-model="element.showInTable" size="small" @change="handleSwitchChange" />
+          <a-switch v-model="element.showInTable" size="small" @update="handleSwitchChange" />
         </div>
-        </template>
-      </Draggable>
+      </VueDraggable>
     </div>
   </MsDrawer>
 </template>
@@ -95,7 +93,7 @@
   import { TableOpenDetailMode } from '@/store/modules/components/ms-table/types';
 
   import { MsTableColumn } from './type';
-  import Draggable from 'vuedraggable';
+  import { VueDraggable } from 'vue-draggable-plus';
 
   const tableStore = useTableStore();
   const { t } = useI18n();

frontend/src/views/setting/organization/template/components/addFieldToTemplateDrawer.vue

@@ -71,13 +71,10 @@
             <MsButton @click="clearHandler">{{ t('system.orgTemplate.clear') }}</MsButton>
           </div>
           <div class="selected-list p-4">
-            <Draggable tag="div" :list="selectedList" ghost-class="ghost" item-key="dateIndex">
-              <template #item="{ element }">
-                <div class="selected-item">
+            <VueDraggable v-model="selectedList" ghost-class="ghost">
+              <div v-for="element in selectedList" :key="element.dateIndex" class="selected-item">
                 <a-tooltip :content="element.name">
-                    <span>
-                      <MsIcon type="icon-icon_drag" class="mt-[3px] text-[16px] text-[var(--color-text-4)]"
-                    /></span>
+                  <span> <MsIcon type="icon-icon_drag" class="mt-[3px] text-[16px] text-[var(--color-text-4)]" /></span>
                   <span class="one-line-text ml-2 w-[270px]">{{ element.name }}</span>
                 </a-tooltip>
                 <icon-close
@@ -87,8 +84,7 @@
                   @click="removeSelectedField(element.id)"
                 />
               </div>
-              </template>
-            </Draggable>
+            </VueDraggable>
           </div>
         </div>
       </div>
@@ -110,7 +106,7 @@
 
   import type { DefinedFieldItem } from '@/models/setting/template';
 
-  import Draggable from 'vuedraggable';
+  import { VueDraggable } from 'vue-draggable-plus';
 
   const { t } = useI18n();