el-tree树形实现鼠标拖拽，以及通过点击上下移按钮实现tree节点上下移动

木屋x

于 2020-07-17 14:26:21 发布

阅读量4.9k

点赞数 5

分类专栏： webPc 文章标签： vue.js javascript html

本文链接：https://blog.youkuaiyun.com/qq_34917408/article/details/107407272

版权

webPc 专栏收录该内容

10 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

在vue项目中，使用el-tree组件满足拖拽功能及节点上移下移需求。通过el-tree的拖拽特性实现鼠标拖拽，利用addBefore、addAfter和remove方法自定义点击按钮实现节点移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-tree树形实现鼠标拖拽，以及通过点击上下移按钮实现tree节点上下移动

1.业务需求：

vue项目开发需求是：使用el-tree组件实现树形鼠标拖拽功能，并且在每一个树形节点的后面增加上移和下移的按钮，通过点击按钮实现节点上下移动。

2.解决方案：

el-tree组件使用HTML如下（我使用的这种是可以自定义树形节点内容的写法）：

<el-tree
                    ref="menutree"
                    :data="treeData"
                    node-key="sysResourcesId"
                    :default-expand-all="false"
                    @node-drag-start="handleDragStart"
                    @node-drag-enter="handleDragEnter"
                    @node