jquery - 向左向右向下移动节点以在树中​​为它们分配角色

Question

我正在借助 javascript 和 jquery 制作一棵树。

在树中，提供了四个按钮来更改节点的缩进。

让我解释一下按钮。

-> 如果我选择一个孩子并单击它，则左缩进应该使特定孩子成为下一级孩子。

例如：如果我选择 c 并单击左侧缩进 c 应成为 b 的子级，则 a 是具有两个子级 b，c 在同一级别的根。

结果将是 a 在一个级别上有两个级别的孩子 b 并且 c 是 b 的孩子。

<- 如果我选择一个孩子的孩子并单击此右缩进，则右缩进比它应该成为同一级别的孩子。

例如：在上述情况下，我已将 c 作为其根为 a 的 b 的子级，现在我希望 c 再次与 b 处于同一级别，而不是选择 c 并单击右缩进。

*结果*a 有两个孩子 b,c 在同一级别。

如果任何选定的项目有更多的孩子，它应该自动跟随它。我希望我能够想象我的场景。如何继续这个没有线索。

在我的标记中，只有一个包含所有内容的 div 标签和一个调用函数“getuperparent()”的按钮。我正在粘贴我的代码以了解事情的进展情况。

    //for calling first time parent
function GetSuperParent() {
            genrateHirerachy();
    }


    function genrateHirerachy() {
        var dvHirearchy = document.createElement("div");
        var counter = $("#hdnDivCounter").val();
        dvHirearchy.id = "dv_" + counter;

        $(dvHirearchy).addClass("divContainer");
        var ulSibContainer = document.createElement("ul");
        ulSibContainer.id = "ul_" + counter;
        var btnAdd = document.createElement("Input");
        btnAdd.setAttribute('onclick', 'GetTextData("'+dvHirearchy.id+'","'+ulSibContainer.id+'")');
        var spnData = document.createElement("span");
        spnData.id = "spnParent_"+counter;
        spnData.setAttribute('ondblclick', 'GetTexBox("'+spnData.id+'")');
        spnData.innerHTML = "double click to add super parent";
        btnAdd.type = "button";
        btnAdd.value = "+";
        //it will be added latter
       // var btnminus = document.createElement("Input");
       // btnminus.type = "button";
        //btnminus.value = "-";

        var btnchild = document.createElement("Input");
        btnchild.type = "button";
        btnchild.value = "+Child";
        btnchild.setAttribute('onclick', 'GetChildData("' + dvHirearchy.id + '")');
        var drpOrder = document.createElement("Select");
        var drpOption = document.createElement("OPTION");

        var drpText = document.createTextNode("display order");
        drpText = document.createTextNode("order");
        drpOption.appendChild(drpText);
        drpOption.setAttribute("value", "0");
        drpOption.setAttribute("value", "1");
        drpOrder.appendChild(drpOption);

        counter++;
        $("#hdnDivCounter").val(counter);
        $(dvHirearchy).append(ulSibContainer);
        $("#dvContainer").append(spnData);
        $("#dvContainer").append(btnAdd);
        //$("#dvContainer").append(btnminus);
        $("#dvContainer").append(btnchild);
        $("#dvContainer").append(drpOrder);
        $("#dvContainer").append(dvHirearchy);
    }


    //for setting the textbox for super parent
    function GetTexBox(spnID) {

        var elem = document.createElement("input");
        elem.type = "text";
        elem.id = "textbox1";
        elem.setAttribute('onblur', 'GetSpanValue("'+spnID+'")');
        if ($('#' + spnID).html() != "double click to add super parent" && $('#' + spnID).html() != '') {
            elem.value = $('#' + spnID).html();
        }
        $('#' + spnID).html('');
        $('#' + spnID).append(elem);
        elem.focus();

    }
    //on blur for super parent text box and remove it
    function GetSpanValue(spId) {
        $('#'+spId).append($('#textbox1').val());
        $('#textbox1').remove();
    }

    //for making the span for parent
    function GetTextData(divID,ulID) {

        //to check from where the function is called
        var checkClass = $('#dvContainer').find('span.bgLime').length;
        if (checkClass == 0) {
            AddSiblings(divID,ulID);
        $('#hdnChkSibbling').val('2');
        }
        else {

            var getValue = $('#dvContainer').find('span.bgLime');
            var spnID = getValue[0].id;
            var check = spnID.indexOf("spn");
            if (check>0) {
                AddSiblings();
                $('#' + spnID).removeClass('bgLime');
            }
            else {
                var chId = getValue.closest("div").attr("id");
                $('#' + spnID).removeClass('bgLime');
                var prntChID = chId.substring(0, 7);
                addSameLevelChild(prntChID);
            }

        }

    }

    //add the sibling
    function AddSiblings(divID,ulID) {
        var dvPrnt = AddNode();
            var liData = document.createElement("li");
                $(liData).append(dvPrnt);
                if ($("#hdnCount").val() != 2) {
                        $('#' + ulID).append("<br/>");
                    }
                        $('#' + ulID).append(liData);
    }

    //for creating the dynamic div
    function AddNode() {
        $("#hdnMngChildCss").val('1');
        var countSpan = $("#hdnCount").val();
        var dvPrnt = document.createElement("div");
        dvPrnt.id = "dv_Pr_" + countSpan;
        dvPrnt.innerHTML = "double click to add parent";
        dvPrnt.setAttribute('ondblclick', 'GetTextBoxForParent()');
        countSpan++;
        $("#hdnCount").val(countSpan);
        return dvPrnt;
    }
        //double click event of the div for sibbling
    function GetTextBoxForParent() {
        if ($("#hdnMngChildCss").val() == 1) {
            var decCount = $("#hdnCount").val() - 1;
            var spnNew = 'dv_Pr_' + decCount;
            $('#' + spnNew).html('');
            var spnImage = document.createElement("span");
            spnImage.id = spnNew + "_" + "spn1";
            $(spnImage).addClass('SpanImage');
            $('#' + spnNew).append(spnImage);
            var spnText = document.createElement("span");
            spnText.id = spnNew + "_" + "spn2";
            spnText.setAttribute('onclick', 'GetColorPrnt("' + spnText.id + '")');
            var elem = document.createElement("input");
            elem.type = "text";
            elem.id = "txtParent";
            elem.setAttribute('onblur', 'SetSpanValueForParent("' + spnText.id + '")');
            $(spnText).append(elem);
            setTimeout(function() { elem.focus() }, 50);
            $('#' + spnNew).append(spnText);
        }
    }


    function GetColorPrnt(spanChildId) {
        $('#' + spanChildId).addClass("bgLime");
        //$("#btnChild").removeAttr("disabled");
    }

    //on blur for all parents of textbox to remove it and set value
    function SetSpanValueForParent(parentId) {
        $('#'+ parentId).append($('#txtParent').val());
        $('#txtParent').remove();
        $("#btnRemove").removeAttr("disabled"); 
          }

    function addSameLevelChild(childId) {
        var liChild = document.createElement("li");
        var dvChildren = createDivChild(childId);
        $(liChild).append(dvChildren);
        $('#' + childId).append(liChild);
    }

    function createDivChild(childId) {
        var countSpan = $("#hdnChildCounter").val();
        var dvChild = document.createElement("div");
        dvChild.id = childId + "_" + countSpan;
        dvChild.innerHTML = "double click to add children";
        dvChild.setAttribute('ondblclick', 'GetChildNode("'+dvChild.id+'")');
        countSpan++;
        $("#hdnChildCounter").val(countSpan);
        return dvChild;
    }





    //for giving the message for adding child
    function GetChildData(dvPrntID) {
    debugger
        var getValue = $('#dvContainer').find('span.bgLime');
            var spnID = getValue[0].id;
            var check = spnID.indexOf("spn");
            var prntDvId = getValue.closest("div").attr("id");
            if (check > 0) {

                addChild(prntDvId);
            }
            else {
                //call the function to append the new child of a particular child and pass the spnID as
                //child id to append the respective node

                addChildofChild(prntDvId);
            }
            $('#' + spnID).removeClass('bgLime');
    }


    function addChildofChild(secChildid) {
        if ($("#hdnChildCounter").val() == 1) {
            var ulChildrens = document.createElement("ul");
        }
        var liChildrens = document.createElement("li");
        var dvChildrens = CreateChildNode(secChildid);
        $(liChildrens).append(dvChildrens);
        if (ulChildrens.tagname == 'ul') {
            $(ulChildrens).append(liChildrens);
            $(secChildid).append(ulChildrens);
        }
        else {
            $(secChildid).append(liChildrens);
        }

    }

    function createUl() {
        var ulChild = document.createElement("ul");
        ulChild.id = "ulc_" + $("#hdnChildCounter").val();
        return ulChild;
    }

    function addChild(parentId) {
        var childUl;
        if ($("#hdnChildCounter").val() == 1) {
            childUl = createUl();
        }
        var liChild = document.createElement("li");
        var dvChild = CreateChildNode(parentId);
        $(liChild).append(dvChild);
        $(childUl).append(liChild);
        $('#' + parentId).append(childUl);
    }


    function CreateChildNode(childID) {
        var childCounter = $("#hdnChildCounter").val();
        var dvChild = document.createElement("div");
        dvChild.id = childID + "_ch_" + childCounter;
        dvChild.innerHTML ="&nbsp;&nbsp;&nbsp;" + "double click to add child";
        dvChild.setAttribute('ondblclick', 'GetChildNode("' + dvChild.id + '")');
        childCounter++;
        $("#hdnChildCounter").val(childCounter);
        return dvChild;
    }


    //double click for getting appended the textbox
    function GetChildNode(parentID) {

        $('#' + parentID).html('');
        var spnchImage = document.createElement("span");
        spnchImage.id = parentID + "_" + "chn1";
        $(spnchImage).addClass('SpanImage');
        $('#' + parentID).append(spnchImage);
        var spnChText = document.createElement("span");
        spnChText.id = parentID + "_" + "chn";
        spnChText.setAttribute('onclick', 'GetColorPrnt("' + spnChText.id + '")');
        var elemTxtChild = document.createElement("input");
        elemTxtChild.type = "text";
        elemTxtChild.id = "txtChildren";
        elemTxtChild.setAttribute('onblur', 'SetChildValueForParent("' + spnChText.id + '")');
        $(spnChText).append(elemTxtChild);
        $('#' + parentID).append(spnChText);
        $("#hdnMngChildCss").val('2');
        setTimeout(function() { elemTxtChild.focus() }, 50);
    }

    //On blur event for the text box
    function SetChildValueForParent(spanParentId) {
        $('#' + spanParentId).append("&nbsp;&nbsp;&nbsp;");
        $('#' + spanParentId).append($('#txtChildren').val());
        $('#txtChildren').remove();
        $("#btnChild").attr('disabled', 'disabled');
    }

    function DeleteNode() {

        var getNode = $('#dvTree').find('span.bgLime');
        var removeNode = getNode[0].id;
        $("#" + removeNode).remove();

    }

Answer 1

如果我理解正确，您想在 MS Word 的“大纲模式”中执行缩进/取消缩进之类的操作。所以，在这种情况下：

• 一种
• b
  • C
• d

当您在“b”上按“缩进”时，情况应该是：

• 一种
  • b
  • C
• d

如果然后在“c”上按“unindent”，情况是：

• 一种
  • b
• C
• d

您可以这样做（假设所选元素具有“已选择”类，并且任何时候只有一个这样的元素）：

function indent() {
    var $element = $('.selected'),
        $newParent = $element.prev();

    if ($newParent.length) {
        $element.appendTo($newParent); // I'm pretty sure this moves the element, might have to remove() as well
    }
}

function unIndent() {
    var $element = $('.selected'),
        $parent = $element.parent();

    $element.insertAfter($parent); // I'm pretty sure this moves the element, might have to remove() as well
}

这也将移动被移动节点的任何子节点，也就是说，它们将保留在其（移动的）父节点之下。

编辑：作为奖励，这里是 moveUp 和 moveDown 函数：

function moveUp() {
    var $element = $('.selected'),
        $previous = $element.prev();

    if ($previous.length) {
        $element.insertBefore($previous);
    }
}

function moveDown() {
    var $element = $('.selected'),
        $next = $element.next();

    if ($next.length) {
        $element.insertAfter($next);
    }
}

显然，这里可以删除一些冗余，我将把它留给“读者练习”；）