ztree實現拖拽功能

最近剛剛接觸了一個樹形結構的文件目錄的，經過拖拽實現結構的變化，利用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' onfocus='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>