背景:
项目中有个左侧菜单,并且各级菜单中的元素是可以拖拽到别的菜单中去,也就是树形结构拖拽修改分组,下面我介绍我项目中使用el-tree进行拖拽分组的方式.
效果:
树形拖拽
首先我们使用的是饿了么组件中的[el-tree]组件,他本身是自带拖拽功能的,只需要加上一个属性:
draggable//是否开启拖拽节点功能，默认为false
去掉部分无关代码后的组件:
<el-tree :data="groupList"
node-key="id"
:default-expanded-keys='defaultexpande' //默认展开所有节点
:props="defaultProps" @node-drop="handleDrop"
draggable //开启可拖拽属性
@node-drop="handleDrop" //拖拽完成时触发的事件
ref='tree'>
</el-tree>其中我的业务处理会放在@node-drop="handleDrop" ,拖拽结束事件中:
拖拽完成时触发的事件 参数依次为：被拖拽节点、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event :
我的业务处理逻辑是:
因为节点被拖动后触发的事件能够告诉我们:
- 被拖拽节点的信息 draggingNode
- 被拖拽节点进入的节点信息 dropNode
- 被拖拽节点的放置类型: dropType
- 表示拖拽事件对象，包含了拖拽操作的相关信息，如拖拽起始位置、拖拽结束位置等。event
两种情况
一种是拖拽到某个节点的内部:
拖拽到分组内部
另外一种情况是拖拽到某个节点的前后
拖拽到某个节点的前后
可能你会觉得这不也是拖拽到分组1的内部吗 ? 其实也没错,但是这种情况el-tree组件的拖拽事件识别的逻辑就是拖拽到了某个节点的前后,然后事件返回的参数会告诉你具体被拖拽到了哪个节点的前后.
注意：拖拽到节点内部的判定必须是直接将被拖拽节点拖拽到分组的上方 ！如果是拖拽到某个分组中的某个位置的话，这种就属于被拖拽到了某个节点的前后了。
业务部分：
我的项目中，树形结构的分层是通过parentid的.而分组内部的顺序是通过每一项的sortCode来决定的. 而el-tree在拖拽完成后,el-tree所绑定的数组会自动的和视图同步,我们可以省去了操作这个数据移动的步骤,我们需要关心的就是拖拽后,如果节点的层级改变了,那么需要将被拖拽节点的pid修改成改变后的父节点的id,以及更新进入的那个分组的里面所有元素的Sortcode.
拖拽到某个节点的内部的情况:
下面进入代码:
handleDrop(draggingNode, dropNode, dropType, ev) {
if (dropType == 'inner') {
//如果是进入了某个分组的内部
draggingNode.data.parentId = dropNode.data.id //修改被拖拽节点的pid
//遍历修改SortCode
for (let i = 0; i < dropNode.children.length; i++) {
const element = dropNode.children[i];
element.sortCode = i
this.ModifyMenu(element) //发请求保存修改sortCode后的分组
}
}
}解析:
在拖拽后我们可以通过dropType知道这个被拖拽的节点是被拖到了draggingNode的前后还是某个节点的里面，所以如果dropType ==‘inner’说明被拖拽节点是被拖拽到了目标节点的内部,那么,我们需要将被拖拽节点的pid设置成目标节点的id: 然后修改进入的那个分组里面的所有子元素的SortCode. 然后发请求保存修改pid和SortCode后的节点. 这里根据后端接口设计不同会有不同 !
拖拽节点到某个分组前后的情况:
下面进入代码:
handleDrop(draggingNode, dropNode, dropType, ev) {
........
else {
// 放到了某个节点的前后,那么pid也相同
draggingNode.data.parentId = dropNode.data.parentId
// 如果是放到了某个节点的前后,判断其有没有父节点
if (dropNode.data.parentId && dropNode.data.parentId !== '-1') {
//有父节点,说明是放到了某个分组中的某个节点的前后
//修改整个分组的sortCode
const activeiTemParent = this.findItemById(this.groupList, draggingNode.data.parentId) //这里手写了一个通过id找数据的方法,通过被移动节点的pid可以找到它的父元素,于是遍历它的父元素,修改所有它父元素的子节点的SortCode
for (let i = 0; i < activeiTemParent.children.length; i++) {
const element = activeiTemParent.children[i];
element.sortCode = i
this.ModifyMenu(element) //发请求保存修改后的数据
}
} else {
// 没有父节点,说明是第一层分组 直接遍历整个数组修改第一层数据的SortCode即可
for (let i = 0; i < this.groupList.length; i++) {
const element = this.groupList[i];
element.sortCode = i
this.ModifyMenu(element) //发请求保存修改后的数据
}
}
}
},
// 找出Id对应的项
findItemById(arr, id) {
for (let i = 0; i < arr.length; i++) {
const item = arr[i];
if (item.id === id) {
return item;
} else if (item.children) {
const result = this.findItemById(item.children, id);
if (result) {
return result;
}
}
}
return null;
},解析:
在拖拽后,进入我们的代码中的else说明节点是被拖拽到了某个节点的前后,说明被拖拽节点(draggingNode)与目标节点(dropNode)是同级的,也就是pid相同,那么,我们需要将被拖拽节点的pid设置成目标节点的pid , 然后这里我手写了一个通过id找元素的方法,因为我们有了被拖拽节点的pid,我们需要找到这个pid对应的数据,然后遍历它修改里面所有子元素的SortCode值. 然后发请求保存修改pid和SortCode后的节点. 这里根据后端接口设计不同会有不同 !
以上就是我实现使用el-tree完成拖拽修改分组的整个过程啦 ! 对你有用的话可以点个赞支持下哦 !
