Previously, zTree is a multifunctional tree plug-in that relies on jQuery.Excellent performance, flexible configuration, and a combination of features are the best benefits of zTree.Specially suited for project development, especially tree menus, tree data.

Official ztree documentation: http://www.treejs.cn/v3/api.php

What you want to achieve:

Required functions:

1: First implement a jQuery ztree tree menu, which is very simple, just refer to the official documents directly
2: Click the New Group button and an input dialog will appear, fill in the name you want to create a new group, and add a parent node menu to the tree menu.
3: You can drag child node elements from other parent nodes into the newly created parent node.

Start code below:

1: First, you need to import some necessary files, which you can download in the official documents.

<!-- Tree -->
<link rel="stylesheet"  href="../../common/ztree/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="../../js/jquery-1.9.1.js" /></script>   
<script src="../../common/ztree/js/jquery.ztree.all.min.js"></script>

2:html interface, buttons for new groups, containers for tree menus, input boxes for filenames, and submit buttons.

    <div class="">
                           <div>
                                <button id="add">New Group</button>
                            </div>
                            <div>
                                <ul id="ztree" class="ztree"></ul>
                            </div>
                            <div id="addgroup" style="display: none">
                                <input type="text" id="group" name="group">
                                <button id="submit">Submit</button>
                            </div>
                    
                </div>

3:css, where the CSS style is some modifications to the official documents, put some necessary icons, more vivid.

#add{
    width:80px;
    height:30px;
    background:#2299ee;
    color:#ffffff;
    border:none;
    margin-top:10px;
    margin-bottom:10px;
}

.ztree li span.button.icon01_ico_close {
    margin-right: 2px;
    background: url(../../images/ztree/close.png) no-repeat scroll 0 0 transparent;
    vertical-align: top;
    *vertical-align: middle
}

.ztree li span.button.icon01_ico_open {
    margin-right: 2px;
    background: url(../../images/ztree/open.png) no-repeat scroll 0 0 transparent;
    vertical-align: top;
    *vertical-align: middle
}

.ztree li span.button.icon02_ico_docu {
    margin-right: 2px;
    background: url(../../images/ztree/woman.png) no-repeat scroll 0 0 transparent;
    vertical-align: top;
    *vertical-align: middle
}

.ztree li span.button.icon03_ico_docu {
    margin-right: 2px;
    background: url(../../images/ztree/man.png) no-repeat scroll 0 0 transparent;
    vertical-align: top;
    *vertical-align: middle
}

4: Focus on js, mainly divided into initialization ztree function, adding grouping function, ztree structure setting function;

$(function() {

    var zTreeObj;

    // Initialize ztree
    initTree();

    function initTree() {
        $.get(path() + "/ztree/init", function(data) {
            for ( var i in data) {
                if (data[i].token == "3")
                    data[i].nocheck = true;
            }
            zTreeObj = $.fn.zTree.init($("#ztree"), setting, data);
        });
    }
    // Click to show div
    $("#add").click(function() {
        $("#addgroup").show();
    })

    // Add Grouping
    $("#submit").click(function() {
        $.ajax({
            url : path() + '/ztree/group/' + $("#group").val(),
            type : 'post',
            success : function(data) {
                $("#addgroup").hide();
                // Reload
                initTree();
            },
            error : function(data) {
                alert("Failed to add group!!")
            }
        });
    })

    // ztree structure settings
    var setting = {
        check : {
            enable : true,
            chkStyle : "radio",
            radioType : "all"
        },
        async : {// Asynchronous Loading Data Operation
            enable : true,
            url : path() + "/ztree",
            autoParam : [ "id" ],
            type : "get",
            // DataFilter: ajaxDataFilter, //Function used to preprocess Ajax returned data
            dataType : "json"
        },
        edit : {
            enable : true,
            showRemoveBtn : false,// Set whether delete button is displayed
            showRenameBtn : setRenameBtn,// Set whether rename button is displayed
            drag : {
                isCopy : false,
                isMove : true,
                prev : true,
                next : true,
                inner : true
            }
        },
        data : {
            keep : {
                parent : true
            // Keep the state of the parent node
            },
            simpleData : {
                enable : true,
                idKey : "id",
                pIdKey : "pId"
            }
        },
        callback : {
            beforeDrag : beforeDrag,
            beforeDrop : zTreeBeforeDrop,
            onDrop : onDrop,
            onRename : zTreeOnRename,
        }
    };

    function setRenameBtn(treeId, treeNode) {
        return treeNode.isParent;
    }

    function zTreeOnRename(event, treeId, treeNode, isCancel) {
        if (treeNode.name == '')
            return;
        var params = {
            id : treeNode.id,
            name : treeNode.name,
        }
        $.ajax({
            url : path() + '/ztree/group',
            contentType : 'application/json',
            type : 'post',
            data : JSON.stringify(params),
            error : function(data) {
                alert("Operation failed!!")
            }
        });
    }

    function beforeDrag(treeId, treeNodes) {
        for (var i = 0, l = treeNodes.length; i < l; i++) {
            if (treeNodes[i].token == "3") {
                return false;
            }
        }
        return true;
    }

    function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType) {
        if (targetNode.token != '3') {
            return false;
        }
        return true;
    }

    function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
        if (moveType == null)
            return;

        var params = {
            id : treeNodes[0].id,
            pId : targetNode.id,
            token : moveType,
        }
        // Set Parent Node
        $.ajax({
            url : path() + '/ztree',
            contentType : 'application/json',
            type : 'put',
            data : JSON.stringify(params),
            error : function(data) {
                alert("Operation failed!!")
            }
        });

    }

    

    // Get Project Path
    function path() {
        var currentPath = window.document.location.href;
        var pathName = window.document.location.pathname;
        var pos = currentPath.indexOf(pathName);
        var localhostPath = currentPath.substring(0, pos);
        var projectName = pathName.substring(0,
                pathName.substr(1).indexOf('/') + 1);
        return (localhostPath + projectName);
    }

})

Okay, so far, a function to add new nodes and drag and drop tree menus is implemented.