перемещение влево вправо вниз, чтобы назначить им роли в дереве

Question

Я делаю дерево с помощью javascript и jquery.

В дереве есть четыре кнопки, которые предоставляются для изменения отступов узлов.

Позвольте мне объяснить кнопки.

-> левый отступ, если я выбираю ребенка и нажимаю на него, должен сделать конкретного ребенка ребенку следующего уровня.

для ex: a корень, который имеет двух детей b, c на том же уровне, если я выбираю c и нажимаю на левый отступ c должен стать дочерним элементом b.

результат будет состоять из двухуровневых детей b на одном уровне, а c является ребенком b.

< - правый отступ, если я выбираю дочерний элемент ребенка и нажимаю на этот отступ справа, чем он должен стать тем же ребенком уровня.

для примера: в приведенном выше случае я сделал c как дочерний элемент 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

Если я правильно понимаю, вы хотите сделать что-то вроде отступов/unindent в «контурном режиме» MS Word.Таким образом, в этой ситуации:

• б
  • с
• d

При нажатии "отступа" на "б", ситуация должна быть :

• • б
  • с
• d

Если вы нажмете "Unindent" на "с", ситуация:

• • b
• с
• 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 
} 

Это также приведет к перемещению любых дочерних элементов перемещенного узла, то есть они останутся под их (перемещенным) родителем.

EDIT: в качестве бонуса, вот функции 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); 
    } 
} 

Очевидно некоторая избыточность может быть здесь удалены, что я оставлю в качестве «упражнения для читателя»;)