更新记录

1.0.1（2025-11-14）

添加子章节

1.0.0（2025-11-14）

init

平台兼容性

uni-app(4.84)

uni-app x(4.84)

el-dragX

一个支持三级拖拽排序的树形组件，适用于 uni-app-x 项目。

功能特性

• ✅ 三级拖拽排序：支持章节、节、小节三级结构，同级之间可拖拽排序
• ✅ 折叠展开：每级可独立折叠/展开
• ✅ 编辑功能：支持编辑标题，点击编辑按钮即可修改
• ✅ 添加功能：支持添加章节和子章节
• ✅ 删除功能：支持删除任意级别的节点
• ✅ 控制开关：可控制拖拽和编辑功能的开启/关闭
• ✅ 事件回调：提供丰富的事件回调，方便业务处理

安装使用

1. 导入组件

<template>
    <view class="page-container">
        <!-- 控制按钮区域 - 固定在顶部 -->
        <view class="control-bar">
            <view class="control-btn" :class="{'active': enableDrag}" @click="toggleDrag">
                <text>拖拽</text>
            </view>
            <view class="control-btn" :class="{'active': enableEdit}" @click="toggleEdit">
                <text>编辑</text>
            </view>
            <view v-if="enableEdit" class="control-btn add-chapter-btn" @click="handleAddChapterClick">
                <text>添加章节</text>
            </view>
        </view>

        <!-- 树形列表内容 - 可滚动 -->
        <scroll-view class="scroll-container" scroll-y="true">
            <el-drag-x 
                v-model="chapterList"
                v-model:enableDrag="enableDrag"
                v-model:enableEdit="enableEdit"
                @edit="handleEdit"
                @delete="handleDelete"
                @regenerate="handleRegenerate"
                @addRequirement="handleAddRequirement"
                @addChild="handleAddChild"
                @addChapter="handleAddChapter"
                @change="handleChange"
            />
        </scroll-view>
    </view>
</template>

<script>
import ElDragX from '@/uni_modules/el-dragX/components/el-dragX/el-dragX.vue'

export default {
    components: {
        ElDragX
    },
    data() {
        return {
            enableDrag: true,
            enableEdit: true,
            chapterList: [
                {
                    id: 1,
                    title: '第一章 很不错',
                    expanded: true,
                    children: [
                        {
                            id: 11,
                            title: '第一节 很不错',
                            expanded: true,
                            children: [
                                { id: 111, title: '一、很不错' },
                                { id: 112, title: '二、很不错' }
                            ]
                        }
                    ]
                }
            ]
        }
    },
    methods: {
        toggleDrag() {
            this.enableDrag = !this.enableDrag
        },
        toggleEdit() {
            this.enableEdit = !this.enableEdit
        },
        handleAddChapterClick() {
            const maxId = this.chapterList.length > 0 
                ? Math.max(...this.chapterList.map(ch => ch.id || 0))
                : 0
            const newChapter = {
                id: maxId + 1,
                title: `第${this.chapterList.length + 1}章 新章节`,
                expanded: true,
                children: []
            }
            this.chapterList.push(newChapter)
        },
        handleEdit(data) {
            console.log('编辑', data)
        },
        handleDelete(data) {
            console.log('删除', data)
        },
        handleRegenerate(data) {
            console.log('重新生成', data)
        },
        handleAddRequirement(data) {
            console.log('添加要求', data)
        },
        handleAddChild(data) {
            console.log('添加子章节', data)
        },
        handleAddChapter(data) {
            console.log('添加章节', data)
        },
        handleChange(list) {
            console.log('数据变化', list)
        }
    }
}
</script>

Props

Events

数据结构

每个节点需要包含以下字段：

interface TreeNode {
    id: number | string        // 唯一标识
    title: string              // 标题
    expanded?: boolean          // 是否展开，默认 true
    children?: TreeNode[]       // 子节点数组
}

使用说明

拖拽排序

1. 确保 enableDrag 为 true
2. 长按拖拽手柄（⋮⋮ 图标）
3. 上下移动手指调整位置
4. 松开手指完成排序

注意：

• 章节只能和章节调换位置
• 节只能在本章下的节之间调换位置
• 小节只能在本节下的小节之间调换位置

编辑标题

1. 确保 enableEdit 为 true
2. 点击编辑按钮（✏️）
3. 在输入框中修改标题
4. 点击保存（✓）或按回车确认
5. 点击取消（✕）取消编辑

添加节点

• 添加章节：点击顶部的"添加章节"按钮
• 添加子章节：点击对应行的"添加子章节"按钮
  • 在章节下点击：添加新的节
  • 在节下点击：添加新的小节

删除节点

点击删除按钮（🗑️）即可删除对应节点。

样式定制

组件使用 scoped 样式，如需定制样式，可以通过以下方式：

1. 使用深度选择器覆盖样式
2. 通过 CSS 变量定制（未来版本支持）

注意事项

1. 数据项必须包含 id 字段作为唯一标识
2. 建议使用 scroll-view 包裹组件以实现滚动功能
3. 控制按钮建议放在组件外部，固定在页面顶部
4. 拖拽功能在移动端使用触摸事件实现

兼容性

• uni-app-x 3.1.0+
• Vue 3

许可证

MIT