ztree实现拖拽功能

ztree是基于jquery的一个插件

api相对简单上手，相比与element 、antd 个人感觉相对简单些

基本入手思路如下：

　　1.这个官方文档  http://www.treejs.cn/v3/main.php#_zTreeInfo，

　　在马云上下载demo 找到对应的文件， 打开相应的功能（ztree数据渲染跟传统dom渲染不一样，ztree默认显示的是name,可以通过setting: 设置属性，来指定代替name ）

　　2，根据demo显示的内容找相应的代码： 来嵌套到自己的代码中 ，最后将ajax请求到的数据用 zNodes来代替；

　　代码基本如下 : 

　　　　　

　　<link rel="stylesheet" href="./css/zTreeStyle.css" type="text/css">
　　<script type="text/javascript" src="./js/jquery.ztree.core.js"></script>
　　<script type="text/javascript" src="./js/jquery.ztree.excheck.js"></script>
　　<script type="text/javascript" src="./js/jquery.ztree.exedit.js"></script>

　　　　html 部分　　　　

　　　　　　<div id="treeDemo" class="ztree" ></div>
　　　　　　

　　　　js代码如下：

　　　　　　

<script>

    var setting = {
        edit: {
            enable: true,
            showRemoveBtn: showRemoveBtn,
            showRenameBtn: showRenameBtn,
            drag: {
                isCopy: false,//所有操作都是move
                isMove: true,
                prev: true,
                next: true,
                inner: true
            }
        },
        data: {
            key:{
                name:"orgName"
            },
            simpleData: {
                enable: true,
                idKey:"orgCode",
                pIdKey:"parentCode",
                rootPid: ""
            }
        },
        callback: {
            beforeDrag: beforeDrag,
            beforeDrop: beforeDrop,
            onDrop: onDrop,
            beforeRemove: beforeRemove,
            beforeRename: beforeRename,
            onRemove: onRemove,
            onRename: onRename
        }
    };

    var zNodes =[] , newCount = 1, log, className = "dark";
    //加载资源
    $.ajax({
        url: 'http://10.3.10.190/enterprise-pc/org/allorg.mvc',
        type: "post",
        async: false,
        success: function (res) {
            zNodes = res.data;
            t = $.fn.zTree.init($("#treeDemo"), setting, zNodes)
        }
    })
    //在拖拽之前
    function beforeDrag(treeId, treeNodes) {
        for (var i=0,l=treeNodes.length; i<l; i++) {
            if (treeNodes[i].drag === false) {
                return false;
            }
        }
        return true;
    }
    //用于捕获节点拖拽操作结束之前的事件回调函数，并且根据返回值确定是否允许此拖拽操作
    //默认值 null
    function beforeDrop(treeId, treeNodes, targetNode, moveType) {
        return targetNode ? targetNode.drop !== false : true;
    }
    //用于捕获节点拖拽操作结束的事件回调函数  默认值： null
    function onDrop(event, treeId, treeNodes, targetNode,moveType) {
        //拖拽成功时，修改被拖拽节点的pid
        console.log(event)
        console.log(treeId +'11111')
        console.log(treeNodes )
        console.log(treeNodes[0].parentCode)
        console.log(targetNode)
        console.log(moveType)
        $.ajax({
            type:'post',
            url: '',
            dataType: "text",
            async: false,
            success: function (data) {
            },
            error: function (msg) {
            }
        });
    }
    function showRemoveBtn(treeId, treeNode) {
        return !treeNode.isFirstNode;
    }
    function showRenameBtn(treeId, treeNode) {
        return !treeNode.isLastNode;
    }
    //删除节点之前执行的函数
    function beforeRemove(treeId, treeNode) {
        console.log('remove')
        className = (className === "dark" ? "":"dark");
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.selectNode(treeNode);
        return confirm("确认删除 节点 -- " + treeNode.orgName + " 吗？");
    }
    //删除节点执行的函数
    function onRemove(e, treeId, treeNode) {

    }
    //重命名之前执行的函数
    function beforeRename(treeId, treeNode, newName, isCancel) {
        className = (className === "dark" ? "":"dark");
       //showLog((isCancel ? "<span style='color:red'>":"") + "[ beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.orgName + (isCancel ? "</span>":""));
        if (newName.length == 0) {
            setTimeout(function() {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.cancelEditName();
                alert("节点名称不能为空.");
            }, 0);
            return false;
        }
        return true;
    }
    //重命名是执行的函数
    function onRename(e, treeId, treeNode, isCancel) {

    }
    //再删除节点之前调用这个函数
    function beforeRemove(treeId, treeNode) {
        className = (className === "dark" ? "":"dark");
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.selectNode(treeNode);
        return confirm("确认删除 节点 -- " + treeNode.orgName + " 吗？");
    }
    //删除节点值执行的函数
    function onRemove(e, treeId, treeNode) {
        //showLog("[ onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.orgName);
    }
    function showRemoveBtn(treeId, treeNode) {
        return !treeNode.isFirstNode;
    }
    function showRenameBtn(treeId, treeNode) {
        return !treeNode.isLastNode;
    }
    var newCount = 1;
    //添加
    function addHoverDom(treeId, treeNode) {
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
            + "' title='add node' οnfοcus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_"+treeNode.tId);
        if (btn) btn.bind("click", function(){
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, orgName:"new node" + (newCount++)});
            return false;
        });
    };
    //
    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_"+treeNode.tId).unbind().remove();
    };
</script>

转载地址：https://www.cnblogs.com/fengch/p/9343144.html