一、同级拖拽

1、当我们使用element-plus的组件时，需要对数据进行排序，但是当我们只想同级进行排序时可以使用以下方法

这是使用的一些属性，可以自己自行去官网查看，链接：Tree 树形控件 | Element Plus (element-plus.org)

2、效果演示

排序前

排序后

代码：

<template>
    <el-button @click="fastViewModel = true">排序</el-button>
    <Ai-Dialog title="查看排序" v-model="fastViewModel" width="800px" :lock-scroll="false">
        <el-tree ref="fastViewTreeRef" :data="sortFastViewList" draggable :props="fastViewProps" node-key="fastViewUserId"
            :allow-drop="sortDrop"></el-tree>
        <template #footer>
            <div style="text-align: center;">
                <el-button type="primary" plain @click="fastViewModel = false">取消</el-button>
                <el-button type="primary" @click="confirmFastViewSort">确认</el-button>
            </div>
        </template>
    </Ai-Dialog>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { AllowDropType } from 'element-plus/es/components/tree/src/tree.type'
const fastViewModel = ref<boolean>(false)
const fastViewProps = reactive({
    label: 'fastViewName'
})
const sortFastViewList = ref<Object[]>([{ fastViewName: '张三' }, { fastViewName: '李四' }, { fastViewName: '王五' }])
const confirmFastViewSort = () => {
    console.log(sortFastViewList.value);
}
// 处理el-tree排序能否成为拖动目标
const sortDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
    if (type == 'inner') {
        return false
    }
    return true
}
</script>
<style lang="scss" scoped></style>

二、Vue3SeamlessScroll如何进行使用

1、使用命令进行安装

npm install vue-seamless-scroll --save

2、页面引入使用即可

<template>
    <div :style="{ 'height': warningHeight + 'px' }">
        <vue3-seamless-scroll :list="sortFastViewList" class="scroll-content" :copyNum="2" :singleHeight="36"
            :singleWaitTime="3000" hover :limitScrollNum="1">
            <div class="message-item flex justify-start align-center disable" v-for="(item, i) in sortFastViewList"
                :key="'sortFastViewList' + i">
                <div class="message-content flex1 text-ellipsis">{{ item.fastViewName }}</div>
            </div>
        </vue3-seamless-scroll>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
const sortFastViewList = ref<any[]>([{ fastViewName: '11111' }, { fastViewName: '2222' }, { fastViewName: '33333' }, { fastViewName: '444' }])
const warningHeight = ref<number>(0)
warningHeight.value = (6 - sortFastViewList.value.length) * 36
</script>
<style lang="scss" scoped>
.scroll-content {
    height: 100%;
    background-color: pink;
    overflow: hidden;
}
.message-item  {
    height: 20px;
    margin-bottom: 16px;
}
</style>