使用jquery将树节点拖放到动态创建的treeview中的其他根节点中

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 
            }
        }
    });
}
}

这将按照您的要求工作。