Перетащите узел дерева в другой корневой узел в динамически созданный TreeView с помощью Jquery

Question

<div id="wrapper"> 
    <div class="tree" id="tree-view" style="width:100%;"> 
     <ul class="parent-node ui-droppable ui-sortable" id="main-ul" style="float:left;"> 
      <li class="ui-sortable-handle parent active" id="R1"><a class="">Root</a><ul style="display: block;" class="child-node ui-droppable ui-sortable"><li class="ui-draggable ui-draggable-handle parent active ui-sortable-handle"><a class="">New Child</a><ul style="display: block;" class="subchild-node ui-droppable ui-sortable"><li class="ui-draggable ui-draggable-handle parent active ui-sortable-handle"><a class="">New Child</a><ul style="display: block;" class="subofsubchild-node ui-droppable ui-sortable"><li class="ui-draggable ui-draggable-handle ui-sortable-handle"><a class="">New Child</a></li></ul></li></ul></li></ul> </li><li class="parent-node parent active"><a class="">New Root</a><ul style="display: block;" class="child-node"><li class="ui-draggable ui-draggable-handle parent active"><a class="">New Child</a><ul style="display: block;" class="subchild-node"><li class="ui-draggable ui-draggable-handle parent active"><a class="">New Child</a><ul style="display: block;" class="subofsubchild-node"><li class="ui-draggable ui-draggable-handle"><a style="display: -moz-box;" class="selected">move this</a></li></ul></li></ul></li></ul></li> 
     </ul> 
    </div> 
</div> 

выше код HTML код

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

function DragNdrop() { 
    $('#tree-view').on('mouseenter mouseover', 'ul>li ul li', function() { 
     $(this).draggable({ 
      revert: true, 
      revertDuration: 0 
     }); 
    }); 

    $("#tree-view a").closest('li').closest('ul').droppable({ 
     activeClass: "ui-state-default", 
     hoverClass: "ui-state-hover", 
     accept: ":not(.ui-sortable-helper)", 
     drop: function(event, ui) { 
      $(this).find(".placeholder").remove(); 
      $("<li></li>").html(ui.draggable.html()).appendTo(this); 
     } 
    }).sortable({ 
     items: "li:not(.selected)", 
     sort: function() { 
      $(this).removeClass("ui-state-default"); 
     } 
    }); 
} 

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

This image you can see for reference for above html code

Answer 1

Я нашел ответ.

function DragNdrop() { 
    $("#tree-view ul li ul li a").draggable({ 
    revert: "invalid", 
    containment: "document", 
    helper: "clone", 
    cursor: "move", 
    start: function(event, ui) { 
     var draggedId = event.target.id; 
    } 

}); 

initDroppable($('ul ul a')); 
function initDroppable($elements) { 
    $elements.droppable({ 
     activeClass: "ui-state-highlight", 
     hoverClass: "droppable-hover", 

     drop: function(event, ui) { 
      if (confirm('Do you want to move the selected node?')) { 
       var draggedId = $(ui.draggable).attr("id"); 
       var droppedId = $(this).attr("id"); 

       var getNode = $("#" + draggedId).closest("li"); 
       var target = $("#" + droppedId).closest('ul'); 

       if ($(getNode).siblings().length == 0) { 
        $("#" + draggedId).closest("ul").parent('li').removeClass('parent active'); 
        $("#" + draggedId).closest("ul").remove(); 
        var copyPaste = $(getNode).detach(); 
        $(copyPaste).addClass("ui-draggable ui-draggable-handle ui-droppable"); 
        $(copyPaste).appendTo(target); 
        HighlightSelectedNode(); 
        treeView(); 
        DragNdrop(); 
       } 
       else { 
        var copyPaste = $(getNode).detach(); 
        $(copyPaste).addClass("ui-draggable ui-draggable-handle ui-droppable"); 
        $(copyPaste).appendTo(target); 
        HighlightSelectedNode(); 
        treeView(); 
        DragNdrop(); 
       } 
       treeView(); 
      } 
      else {//Do Nothing 
      } 
     } 
    }); 
} 
} 

Это будет работать согласно вашему требованию.