美文网首页
z-tree 实现只能在兄弟节点拖拽

z-tree 实现只能在兄弟节点拖拽

作者: lucerneflyee | 来源:发表于2019-12-25 14:58 被阅读0次

先说几个要点:

  1. 需求是实现树的拖拽,并且只能是兄弟节点之间的拖拽,而且如果不能拖拽时,要不显示出能拖拽标识;默认展开第一个父级节点(这里的数据结构是:一级分类--父级分类--叶子节点)
  2. beforeDrag: 用于捕获节点被拖拽之前的事件回调函数,并且根据返回值确定是否允许开启拖拽操作。
  3. beforeDrop:用于捕获节点拖拽操作结束之前的事件回调函数,并且根据返回值确定是否允许此拖拽操作。
  4. onDrop:用于捕获节点 拖拽操作结束 的事件回调函数。
    5.
    onAsyncSuccess
    :用于捕获异步加载正常结束的事件回调函数。
  5. 以上(beforeDrag,beforeDrop,onDrop,onAsyncSuccess, prev,next)的callback执行顺序:
    beforeDrag > dropNext、dropPrev > beforeDrop > onDrop
var _zTree = {
    tree: null,
    beforeDrag: function(treeId, treeNodes){
        for(var i = 0, l = treeNodes.length; i < l; i++){
            if(treeNodes[i].drag === false){
                return false;
            }else if(treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false){
                return false;
            }
        }
        return true;
    },
    beforeDrop: function(treeId, treeNodes, targetNode, moveType){
        var moveNode = treeNodes[0];
        switch(moveType){
            case 'prev':
            case 'next':
                if(moveNode.pId == targetNode.pId){
                    return true;
                }
                break;
        }
        return false;
    },
    zTreeOnDrop: function(event, treeId, treeNodes, targetNode, moveType){
        var moveNode = treeNodes[0];
        //这里控制一下,一级分类以及父级节点不能拖动(只有叶子节点可以)
        if(moveNode.level > 1){
            //确认移动之后,将其父级id记录下来
            if(targetNode && moveNode.pId == targetNode.pId){
                _orderSet.editAC.push(targetNode.pId);
                _orderSet.editAC = _orderSet.editAC.distinct();
            }
        }
    },
    zTreeOnAsyncSuccess: function(event, treeId, treeNode, msg){
        if(treeNode.isParent){
            //isAC: 父级节点没有该属性,叶子节点才有该属性,这里需要默认展开一下第一个父级节点
            _zTree._firstExpand(treeNode, treeNode.isAC ? false : true);
        }
    },
    _firstShow: function(){
        var nodes = this.tree.getNodes();
        if(nodes && nodes.length > 0){
            //展开所有第一次取回的节点
            for(var i = 0; i < nodes.length; i++){
                //默认展开第一个节点
                this._firstExpand(nodes[i], true);
            }
        }
    },
    /**
     * 展开节点
     * @param node
     * @param isRoot
     * @private
     */
    _firstExpand: function(node, isRoot){
        var children = node.children;
        if(children && children.length > 0 && isRoot){
            this._firstExpand(children[0], false);
        }
        //展开没有展开的节点
        if(!node.open){
            this.tree.expandNodeOnly(node, true);
        }
    },
    dropPrev: function(treeId, nodes, targetNode){
        var moveNode = nodes[0];
        //这里控制一下,一级分类以及父级节点不能拖动(只有叶子节点可以)
        if(moveNode.level > 1){
            //支持同一个父级节点下进行节点的拖拽排序,不可跨分类排序
            if(moveNode.pId == targetNode.pId){
                return true;
            }
        }
        return false;
    },
    dropNext: function(treeId, nodes, targetNode){
        var moveNode = nodes[0];
        //这里控制一下,一级分类以及父级节点不能拖动(只有叶子节点可以)
        if(moveNode.level > 1){
            //支持同一个父级节点下进行节点的拖拽排序,不可跨分类排序
            if(moveNode.pId === targetNode.pId){
                return true;
            }
        }
        return false;
    },
};
setting: {
        edit: {
            drag: {
                isCopy: false,
                autoExpandTrigger: true,//拖拽时父节点自动展开是否触发 onExpand 事件回调函数。
                prev: _zTree.dropPrev,//拖拽到目标节点时,设置是否允许移动到目标节点前面的操作。
                inner: false,//拖拽到目标节点时,设置是否允许成为目标节点的子节点。[setting.edit.enable = true 时生效]拖拽目标是 根 的时候,不触发 prev 和 next,只会触发 inner
                next: _zTree.dropNext//拖拽到目标节点时,设置是否允许移动到目标节点后面的操作。
            },
            enable: true,//设置 zTree 是否处于编辑状态,设置为true才能被拖拽
            showRemoveBtn: false,
            showRenameBtn: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        //异步加载
        async: {
            enable: true,//设置 zTree 是否开启异步加载模式
            url: '*****/Tree.do?',//Ajax 获取数据的 URL 地址。
            autoParam: ['catID', 'isAC'],//异步加载时需要自动提交父节点属性的参数。可以设置提交时的参数名称,例如 server 只接受 zId : ["id=zId"]
            dataType: 'json'//Ajax 获取的数据类型。
        },
        callback: {
            beforeDrag: _zTree.beforeDrag,//用于捕获节点被拖拽之前的事件回调函数,并且根据返回值确定是否允许开启拖拽操作
            beforeDrop: _zTree.beforeDrop,//用于捕获节点拖拽操作结束之前的事件回调函数,并且根据返回值确定是否允许此拖拽操作。
            onDrop: _zTree.zTreeOnDrop,//用于捕获节点 拖拽操作结束 的事件回调函数。
            onAsyncSuccess: _zTree.zTreeOnAsyncSuccess//用于捕获异步加载正常结束的事件回调函数。
        }
    }
var _order = {
    zNodes: [],
    editAC: [],
    init: function(){
        this.initTree();
    },
    initTree: function(){
        //获取数据
        var _that = this;
        $.ajax({
            url: '********/Tree.do?',
            async: false,
            dataType: 'json',
            success: function(data){
                var _tree = $.fn.zTree.init($('#cTree'), _that.setting, data);
                _zTree.tree = _tree || $.fn.zTree.getZTreeObj('cTree');
                _zTree._firstShow();
            }
        });
    },
};
(function(){
    _orderSet.init();
})();

相关文章

  • z-tree 实现只能在兄弟节点拖拽

    先说几个要点: 需求是实现树的拖拽,并且只能是兄弟节点之间的拖拽,而且如果不能拖拽时,要不显示出能拖拽标识;默认展...

  • 基于VUE+ElementUI+JsPlumb的流程设计器,支持

    基于VUE+ElementUI+JsPlumb的流程设计器,通过 vuedraggable 插件来实现节点拖拽。支...

  • 【ReactNative错误集锦】ListView无法拖拽滑动

    问题:ListView无法拖拽滑动 详细过程: 根节点使用ListView后,正常拖拽滑动 非根节点使用ListV...

  • HTML5拖拽drag

    通过拖拽实现页面元素的位置改变 实现拖拽效果 源元素 - 要拖拽的文件 目标元素 - 要拖拽到哪里去 目前实现拖拽...

  • antd-design中树节点只能平级拖拽

    以下是这个组件中需要实现的功能 树的节点拖拽并且只能是平级与平级之间 节点hover出现新增删除编辑设置 引入树组...

  • 拖拽API

    实现拖拽效果 目前实现拖拽效果 HTML5拖拽 源元素事件例子 目标元素事件 从本地拖放图片到页面中 实现拖拽

  • HTML5实现拖拽

    实现拖拽效果源元素 - 要拖拽的文件目标元素 - 要拖拽到哪里去 目前实现拖拽效果使用原生DOM就能实现 - 最麻...

  • 原生拖拽,拖放事件(drag and drop)

    拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的...

  • echarts实现关系图节点拖拽整理

    前言: echarts关系图节点拖拽,百度谷歌查个遍,不是缺斤就是少两,没有能实现的要不就是答不对题,包括gith...

  • jQuery 常用的节点操作

    js 获取元素(父节点,子节点,兄弟节点) jQuery 获取元素(父节点,子节点,兄弟节点) 元素筛选

网友评论

      本文标题:z-tree 实现只能在兄弟节点拖拽

      本文链接:https://www.haomeiwen.com/subject/fwkcoctx.html