youzitree/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

拖拽
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 3m3s
Details

Browse Source
This commit is contained in:
youzi 2025-02-21 11:54:46 +08:00
parent caac4d068e
commit 5da46d7230
1 changed files with 74 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/views/home/navMenu.vue
View File

@ -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>