element ui tree 拖拽(支持子节点拖拽，子节点无法向外拖拽，最外层父节点可设置无法拖拽)-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui tree 拖拽(支持子节点拖拽，子节点无法向外拖拽，最外层父节点可设置无法拖拽)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

elementUI 树组件拖拽(支持子节点拖拽，子节点无法向外拖拽，最外层父节点可设置无法拖拽)

elementui tree 拖拽,elementui,vue.js,javascript
效果:1.最外层的 HAS-BLED 节点不可拖拽
2.子节点高龄仅在当前父节点内拖拽，不可拖拽到测试111和HAS-BLED节点内
3.测试444，测试333内节点也仅在父节点测试111区域内拖拽

HTML

 			<el-tree
                  ref="rightTree"
                  :data="rightTreeData"
                  node-key="labelId"
                  default-expand-all
                  @node-click="nodeClick"
                  :props="defaultProps"
                  draggable
                  @node-drop="handleDrop"
                  :allow-drop="allowDrop"
                  :allow-drag="allowDrag"
                >
		 </el-tree>

操作属性

draggable：设置树组件可拖拽
@node-drop 拖拽成功完成时触发的事件
allow-drag 判断节点能否被拖拽
allow-drop 拖拽时判定目标节点能否被放置。type 参数有三种情况：‘prev’、‘inner’ 和 ‘next’，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后文章来源地址https://www.toymoban.com/news/detail-556989.html

js

   // 最外层父节点不可拖拽
    allowDrag(draggingNode) {
      console.log(draggingNode)
      return draggingNode.data.labelTypeId;//唯一键，最外层父节点无labelTypeId属性，则不可拓展
    },
    allowDrop(moveNode, inNode, type) {
      // allow-drop属性是用来限制树节点拖拽后是否可以放置在当前位置，属性值为true时可以，为false时不可以。
      // 1.子节点禁止外托
      // 2.禁止拖进有子节点的层级
      // 3.没有设置一级节点判断 不可拖拽在allowDrag设置
      console.log(moveNode.nextSibling,moveNode.parent.id,inNode.parent.id)
          // 二级拖动到二级 高龄、测试111
            if (
                moveNode.level == 2 &&
                inNode.level == 2 &&
                moveNode.parent.id == inNode.parent.id
            ) {
                // 四种情况
                if (moveNode.nextSibling == undefined) {
                    return type == 'prev';
                } else if (inNode.nextSibling == undefined) {
                    return type == 'next';
                } else if (moveNode.nextSibling.id !== inNode.id) {
                    return type == 'prev';
                } else {
                    return type == 'next';
                }
            }
			//三级内拖拽 测试222，测试333，测试444
            if (
                moveNode.level == 3 &&
                inNode.level == 3 &&
                moveNode.parent.id == inNode.parent.id
            ) {
                // 四种情况
                if (moveNode.nextSibling == undefined) {
                    return type == 'prev';
                } else if (inNode.nextSibling == undefined) {
                    return type == 'next';
                } else if (moveNode.nextSibling.id !== inNode.id) {
                    return type == 'prev';
                } else {
                    return type == 'next';
                }
            }
    },