feat：新增拖拽改变层级功能

src/views/chart/ContentLayers/index.vue

@@ -11,28 +11,38 @@
         <component :is="LayersIcon"></component>
       </n-icon>
     </template>
-
     <!-- 图层内容 -->
-    <layers-list-item
-      v-for="item in reverseList"
-      :key="item.id"
-      :componentData="item"
-      @mousedown="mousedownHandle(item)"
-      @mouseenter="mouseenterHandle(item)"
-      @mouseleave="mouseleaveHandle(item)"
-      @contextmenu="handleContextMenu($event, item)"
-    ></layers-list-item>
+    <!-- https://github.com/SortableJS/vue.draggable.next -->
+    <draggable
+      item-key="id"
+      tag="transition-group"
+      v-model="reverseList"
+      ghostClass="ghost"
+      @change="onMoveCallback"
+    >
+      <template #item="{ element }">
+        <layers-list-item
+          :componentData="element"
+          @mousedown="mousedownHandle(element)"
+          @mouseenter="mouseenterHandle(element)"
+          @mouseleave="mouseleaveHandle(element)"
+          @contextmenu="handleContextMenu($event, element)"
+        ></layers-list-item>
+      </template>
+    </draggable>
   </content-box>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, toRaw, ref, watch } from 'vue'
+import Draggable from 'vuedraggable'
+import cloneDeep from 'lodash/cloneDeep'
+
 import { ContentBox } from '../contentBox/index'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { CreateComponentType } from '@/packages/index.d'
-import cloneDeep from 'lodash/cloneDeep'
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { MenuEnum } from '@/enums/editPageEnum'
 
@@ -45,16 +55,36 @@ const chartEditStore = useChartEditStore()
 
 const { handleContextMenu } = useContextMenu()
 
-// 逆序输出
+// 逆序展示
 const reverseList = computed(() => {
   const list: CreateComponentType[] = cloneDeep(chartEditStore.getComponentList)
   return list.reverse()
 })
 
+// 缩小
 const backHandle = () => {
   chartLayoutStore.setItem(ChartLayoutStoreEnum.LAYERS, false)
 }
 
+// 移动结束处理
+const onMoveCallback = (val: any) => {
+  const { oldIndex, newIndex } = val.moved
+  const moveTarget = toRaw(val.moved.element)
+  if (newIndex - oldIndex > 0) {
+    // 从上往下
+    chartEditStore.getComponentList.splice(-(oldIndex + 1), 1)
+    chartEditStore.getComponentList.splice(-newIndex, 0, moveTarget)
+  } else {
+    // 从下往上
+    chartEditStore.getComponentList.splice(-(oldIndex + 1), 1)
+    if (newIndex === 0) {
+      chartEditStore.getComponentList.push(moveTarget)
+    } else {
+      chartEditStore.getComponentList.splice(-newIndex, 0, moveTarget)
+    }
+  }
+}
+
 // 点击事件
 const mousedownHandle = (item: CreateComponentType) => {
   chartEditStore.setTargetSelectChart(item.id)
@@ -81,5 +111,8 @@ $wight: 170px;
   &.scoped {
     width: 0;
   }
+  .ghost {
+    opacity: 0;
+  }
 }
 </style>