el-tree树的拖拽排序

el-tree树的拖拽排序


主要加入了draggable属性和node-drop事件,使el-tree支持拖拽,添加allow-drop判定拖拽时目标节点能否被放置

	// el-tree拖拽
		function handleDrop(draggingNode:any,dropNode:any,dropType:string,evt:any) {
			// console.log(draggingNode,'draggingNode被拖拽节点')
			// console.log(dropNode,'dropNode结束推拽最后进入的节点')
			// console.log(dropType,'dropType放置的位置')
			// console.log(evt,'evt')
			// console.log(dropNode.level,'dropNode.level')
			let paramsData = [] as any;
			let data = dropType != "inner" ? dropNode.parent.data:dropNode.data;
			// 要循环的节点
			var nodeData = dropNode.level == 1 && dropType != "inner" ?data:data.children;
			nodeData.forEach((element:{parentId: string})=>{
				element.parentId = dropNode.level == 1&& dropType != "inner" ? "0" :data.templateId;
			})
			nodeData.forEach((element:{ templateId: string, parentId: string}, i: number)=>{
				let dept = {
					templateId:element.templateId,
					parentNodeId:element.parentId,
					nodeRank:i,
					// name:element.titleName
				}
				paramsData.push(dept)
			})
			updateTemplateNodeBatchApi(paramsData).then(()=>{
				// console.log(res,'res')
			})
		}
		// 允许拖拽的节点
		function allowDrop(draggingNode:any,dropNode:any,type:any) {
		// 不允许文件中移入结点
			if(type == 'inner' && dropNode.data.nodeType != '1') {
				return false;
			}else {
				return true;
			}
		}

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值