From 5da46d72301cdccc2525a81e96343a1224c50715 Mon Sep 17 00:00:00 2001
From: youzi <2410633923@qq.com>
Date: Fri, 21 Feb 2025 11:54:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8B=96=E6=8B=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/navMenu.vue | 81 ++++++++++++++++++++++++++++++++++----
 1 file changed, 74 insertions(+), 7 deletions(-)

diff --git a/src/views/home/navMenu.vue b/src/views/home/navMenu.vue
index a4a0a8c..84f6c31 100644
--- a/src/views/home/navMenu.vue
+++ b/src/views/home/navMenu.vue
@@ -2,17 +2,19 @@
   <div class="box flex flex-wrap px-8 sm:px-0">
     <n-card :style="{ height: boxH + 'px' }">
       <n-scrollbar :class="`h-[${boxH}px]`" :style="{ height: boxH - 40 + 'px' }">
-        <div class="grid gridSpace gap-4 items-center justify-items-center">
-          <div class="w-[200px]  my-4 sm:w-[150px] sm:my-1" v-for="(i, ii) in navList">
-            <n-button @click="link(i.menuLink)" @contextmenu="handdlemenutext($event, i)"
+        <div ref="dargBox" class="grid gridSpace gap-4 items-center justify-items-center" @dragstart="handdleDragstart"
+          @dragover="handdleDragover" @dragenter="haddleDragenter" @drop="handdleDrop">
+          <div :data-idx="i.menuSort" :draggable="i.menuSort > 0" class="drag-box w-[200px]  my-4 sm:w-[150px] sm:my-1"
+            v-for="(i, ii) in navList">
+            <n-button :data-idx="i.menuSort" @click="link(i.menuLink)" @contextmenu="handdlemenutext($event, i)"
               class="btn w-full  hover:text-[white]" type="primary" ghost>
               <template #icon>
-                <img class="rounded-full mr-2" v-if="!i.exp" width="20" height="20"
+                <img :data-idx="i.menuSort" class="rounded-full mr-2" v-if="!i.exp" width="20" height="20"
                   :src="'https://favicon.im/' + i.menuLink.split('/')[2]" alt="" @error="i.exp = true">
-                <div :style="{ backgroundColor: '#50C4D3' }"
+                <div :data-idx="i.menuSort" :style="{ backgroundColor: '#50C4D3' }"
                   class="w-[20px] h-[20px] text-[14px] text-[white] rounded-full" v-else>{{ i.menuName[0] }}</div>
               </template>
-              <span class="truncate">{{ i.menuName }}</span>
+              <span :data-idx="i.menuSort" class="truncate">{{ i.menuName }}</span>
             </n-button>
           </div>
           <div class="w-[200px]  my-4 sm:w-[150px] sm:my-1">
@@ -109,6 +111,8 @@ async function getNav() {
   else {
     res = await $http.nav.listNav()
   }
+  // console.log(res.data);
+  res.data.sort((a, b) => a.menuSort - b.menuSort)
   navList.value = res.data.map((item) => {
     item.exp = false
     item.active = false
@@ -208,7 +212,7 @@ function handdleleavemenu(id) {
   }, 2000);
 }
 function handdlemenutext(e, i) {
-  if(i.belong == 'common') return
+  if (i.belong == 'common') return
 
   // console.log(e, i);
   menuShow.value = false
@@ -234,6 +238,65 @@ function resetMenuList() {
     },
   ])
 }
+const dragIdx = ref(-1)
+function handdleDragstart(e) {
+  console.log(e.target.dataset.idx || 0);
+  dragIdx.value = parseInt(e.target.dataset.idx)
+}
+function handdleDragover(e) {
+  e.preventDefault();
+}
+function handdleDrop(e) {
+  e.preventDefault();
+  console.log(navList.value);
+}
+
+const dropIdx = ref(-1)
+const dragBox = ref(null)
+// 拖拽排序
+function haddleDragenter(e) {
+  // 拖拽
+  e.preventDefault();
+  // console.log(e.target.dataset.idx == dropIdx.value);
+
+  if (e.target == dragBox.value || e.target.dataset.idx == dropIdx.value) {
+    return
+  }
+  // console.log(e.target.dataset);
+  if (e.target.dataset.idx) {
+    dropIdx.value = parseInt(e.target.dataset.idx)
+  }
+  if (dropIdx.value == 0) dropIdx.value = 1
+  const s = dragIdx.value, d = dropIdx.value
+  let si, di
+  navList.value.forEach((i, ii) => {
+    if (i.menuSort == s) {
+      si = ii
+    }
+    if (i.menuSort == d) {
+      di = ii
+    }
+  })
+  if (s > d) {
+    let temp = navList.value[si]
+    for (let i = si; i >= di; i--) {
+      navList.value[i] = navList.value[i - 1]
+      navList.value[i].menuSort++
+    }
+    navList.value[di] = temp
+    navList.value[di].menuSort = d
+  }
+  if (s < d) {
+    let temp = navList.value[si]
+    for (let i = si; i < di; i++) {
+      navList.value[i] = navList.value[i + 1]
+      navList.value[i].menuSort--
+    }
+    navList.value[di] = temp
+    navList.value[di].menuSort = d
+  }
+
+}
 
 //mark 周期、内置函数等
 onMounted(() => {
@@ -337,4 +400,8 @@ onMounted(() => {
   flex-direction: column;
   background-color: #fff;
 }
+
+.drag-box {
+  transition: transform 1s ease-in-out;
+}
 </style>
\ No newline at end of file