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

src/store/modules/chartEditStore/chartEditStore.ts

@@ -164,12 +164,13 @@ export const useChartEditStore = defineStore({
       if (y) this.mousePosition.y = y
     },
     // * 找到目标 id 数据下标位置（无则返回-1）
-    fetchTargetIndex(): number {
-      if(!this.getTargetChart.selectId) {
+    fetchTargetIndex(id?: string): number {
+      const targetId = id || this.getTargetChart.selectId
+      if(!targetId) {
         loadingFinish()
         return -1
       }
-      const index = this.componentList.findIndex(e => e.id === this.getTargetChart.selectId)
+      const index = this.componentList.findIndex(e => e.id === targetId)
       if (index === -1) {
         loadingError()
       }
@@ -178,15 +179,15 @@ export const useChartEditStore = defineStore({
     /**
      * * 新增组件列表
      * @param chartConfig 新图表实例
-     * @param isEnd 是否末端插入
+     * @param isHead 是否头部插入
      * @param isHistory 是否进行记录
      * @returns
      */
-    addComponentList(chartConfig: CreateComponentType, isEnd = false, isHistory = false): void {
+    addComponentList(chartConfig: CreateComponentType, isHead = false, isHistory = false): void {
       if (isHistory) {
         chartHistoryStore.createAddHistory(chartConfig)
       }
-      if (isEnd) {
+      if (isHead) {
         this.componentList.unshift(chartConfig)
         return
       }
@@ -274,7 +275,7 @@ export const useChartEditStore = defineStore({
     setBottom(isHistory = true): void {
       this.setBothEnds(true, isHistory)
     },
-    // * 互换图表位置
+    // * 上移/下移互换图表位置
     wrap(isDown = false, isHistory = true) {
       try {
         loadingStart()

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>